axure原型设计之翻牌

所谓翻牌，即是卡牌的翻转，通过模拟卡牌的的翻转，可以让展示更加生动逼真。虽然平时在使用互联网中比较少看到这种交互，但是还是存在的，比如说wps的有奖签到。这一章就教教大家如何使用axure原型工具制作翻牌。



第一步：拖拉摆放好一个动态面板，面板中有state1和state2两种面板状态，state1面板状态中放置一个灰底黑框的矩形，state2面板状态中放置一张十二生肖中鼠的卡通图片。并将此动态面板命名为“鼠”。



第二步：为该动态面板添加鼠标点击时用例，在用例中添加4个动作

1、相对移动“鼠”x轴方向200，y轴方向0，动画为线性，时间为300毫秒

2、设置“鼠”的面板状态为state2，进入动画为向右翻转1000毫秒，推出动画为向右翻转1000毫秒；

3、将“鼠”置于顶层

4、禁用“鼠”



第三步：复制粘贴11份，分别将动态面板改名为“牛”、“虎”、“兔”、“龙”、“蛇”、“马”、“羊”、“猴”、“鸡”、“狗”和“猪”，同时也分别将state2面板状态中的图片换成相应生肖的卡通图片。不过，大家要注意各个生肖动态面板的摆放层次。



到这里就制作完成了，点击预览并点击卡牌就可以看到翻牌效果了。同时也可以随时关注我的个人博客：http://weidublog.com，因为工作过程中有很多这些axure原型设计小技巧的例子，所以我会坚持分享下去，希望对大家有帮助，你们对我的关注就是我的动力。

效果图：axure原型设计之翻牌
附件下载：翻牌rp文件 

作者：维度
转载请注明出处：http://weidublog.com/index.php/2017/03/23/234/