大连做网站
首页 > 建站知识 > 如何优雅地做一个抽奖转盘

如何优雅地做一个抽奖转盘

2018-11-22

  1.3 设置补间动画时间

  点击“Animate”将下面的工作区显示出来

  进一步而言

  点击箭头,将这个时间用鼠标拉长一点,设置为0.1秒的间隔即可,进一步而言就可以预览了Principle交互效果

  2. (Axure 7.0)使用动态面板做转盘抽奖效果

  2.1 准备材料

  拉一个圆形,和一根直线,多复制几根,调整元件的位置角度,搞定,如图

  2.1 设置动态面板

  接下来做一个指针,拉一个动态面板,在动态面板中,添加若干状态,如图:

  在这里选中其中一个状态,在状态页面中移动指针位置,按照旋转的方向,来9个,差不多了。

  此处省略….

  如上图,每个角度变换一下即可

  2.3 设置事件

  设置“抽奖”按钮事件,如图:

  ok,已经搞定。

  此方法我在Axure 7.0时用的,更新了Axure到8.0 后 更加方便。下面介绍一下8.0版本的玩法。

  3. (Axuer 8.0)使用自带的旋转功能做抽奖转盘效果

  3.1 准备材料

  上述2个例子,一个是转动卡片的效果,,一个是转动箭头的效果,此处介绍哦一下转动转盘的效果,转盘动箭头不动,先准备一下材料。

  指针固定不动即可,首先先将转盘上的元素“组合”起来取个名称“转盘”。

  进一步而言在“点我”这个元件上添加事件。

  3.2 添加事件

  设置旋转,参数为:相对位置、角度为[[1000+Math.random()*360]]、方向为顺时针、锚点为中心、动画为线性、事件为1000毫秒。

  搞定,预览即可。

  看到这里Axure7.0基本上可以卸载了,赶紧升级吧~

  若要做复杂一点的交互,推荐使用Principle,比AE入手快~又简单~~加油