之前有个帖子讲的是如何让你的原型动起来。很多童鞋问我彩票转盘怎么做。今天和大家聊一聊空(看视频第22秒的效果)这是用Axure7.0做的，后面我会介绍用Axure 8.0和Principle做互动抽奖~(Principle互动效果)。
本文内容如下:
1.(原理)用互动软件抽奖。
1.1准备材料
1.2设置点击事件
1.3设置补间动画时间
2.(Axure 7.0)使用动态面板制作转盘抽奖效果。
2.1准备材料
2.1设置动态面板
2.3设置事件
3.(Axuer 8.0)利用自带的旋转功能制作彩票转盘效果。
3.1准备材料
3.2添加事件
1.(原理)用互动软件抽奖。
1.1准备材料
不知道原理的童鞋可以去官网找。个人建议使用这款http://principleux.com/进行交互设计(但唯一的缺点是只有Mac版)。
准备材料(草图上的文件可以直接复制成原理)简单粗暴。以JO+管家App为例，如下图所示。
1.2设置点击事件
点击图上的“闪电箭头”选择Tap，拖动到要跳转的页面(这里Tap就是点击事件)。
然后画布上出现一个绿色箭头，如图所示:
为满足需求，点击“抽奖”按钮后，视图会不断切换，所以需要在第二个视图后设置一个事件“自动”，点击“自动”拖拽到下一个视图。这里有很多重复的任务，所以只剪一张图。
完成以上动作后，你会发现点击抽奖会改变视图太快，交互性不好，所以你需要在下面设置补间动画的时间。
1.3设置补间动画时间
单击“动画”显示下面的工作区。
然后
点击箭头，用鼠标拉长这个时间，设置为0.1秒的间隔。然后可以预习一下原理的交互效果。
2.(Axure 7.0)使用动态面板制作转盘抽奖效果。
2.1准备材料
拉一个圆和一条直线，多抄几张，调整构件的位置角度，就搞定了，如图。
2.1设置动态面板
接下来做一个指针，拉一个动态面板，在动态面板中添加几个状态，如图:
在这里选择一个状态，在状态页中移动指针位置，按照旋转的方向数九个，差不多就够了。
省略...给你。
如上图，每个角度换一下就行了。
2.3设置事件
设置"抽奖"按钮事件，如图:
好了，完成了。
我在Axure 7.0的时候用过这个方法，更新Axure到8.0以后就更方便了。下面是8.0版本的玩法。
3.(Axuer 8.0)利用自带的旋转功能制作彩票转盘效果。
3.1准备材料
上面两个例子，一个是旋转卡片的效果，一个是旋转箭头的效果。这里，我们来介绍一下旋转转盘的效果。转盘不动箭头，先准备好材料。
修好指针就行了。先将转盘上的元素“组合”起来，命名为“转盘”。
然后在“点击我”组件上添加一个事件。
3.2添加事件
旋转，参数有:相对位置，角度[[1000+Math.random()*360]]，顺时针方向，锚点为中心，线性动画，1000毫秒的事件。
搞定，只是预览。
看到Axure7.0在这里基本可以卸载，赶紧升级吧~
更复杂的交互，推荐用Principle，比AE更快更简单~ ~加油！
分享作品
(题图由作者提供)
作者:巴斯
本文由@Bass原创发布。每个人都是产品经理。未经许可，禁止转载。
