所谓翻牌,即是卡牌的翻转,通过模拟卡牌的的翻转,可以让展示更加生动逼真。虽然平时在使用互联网中比较少看到这种交互,但是还是存在的,比如说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文件
作者:维度