Axure基础详解十九：转盘抽奖效果

效果演示

1、点击“抽奖按钮”随机转动轮盘，轮盘停止时，指针对着的扇形区域高亮显示；

2、可以重复多次开始抽奖，每次抽中的奖品都是随机的。

---

制作过程

组件

• 5个同等角度同等大小的扇形，区分出颜色。分别给每个扇形添加【样式效果】>>【选中状态】填充一个亮一点的绿色。给5个“扇形”组合在一起命名为“转盘”。扇形可以用【菜单栏】中的【插入】>>【形状】中的扇形制作。

• 5条长度一样的垂直线，命名为“接触线”分别以不同角度摆放在对应的扇形位置。默认将它们放置在最底成，遮盖住。
• 一个圆形的“抽奖按钮”和一个三角形的“指针”。

---

给扇形添加点击事件

• 分别给每个扇形添加一个点击事件：当“指针”接触到“扇形”对应的“接触线”时，设置“扇形”的【选中状态】为“真”。

---

给“抽奖按钮”设置点击事件

• 当点击“抽奖按钮”时，设置“转盘”顺时针旋转【1080+Math.random()*360】°；锚点为“中心”；动画“缓进缓出”使其开始转和最后结束的时候比较慢，这种效果比较符合实际；时间5000毫秒。（【random()】函数可以获取一个0-1之间的数，将它乘以360°，就可以获得一个0到360度里的随机数。）
• 旋转之后我们要加一个等待时间，等待旋转结束，一般旋转动画时间是多少，等待时间就多少，但是考虑到不同的电脑会有适当的延时，具体等待时间可以轻微调整。
• 等待时间结束之后，【触发】5个“扇形”的点击事件，以此实现让选中对应的扇形区域高亮变色。

---

• 如果之前已经转过一次，点击开始按钮的时候，就要先让扇形变回原来的颜色，再次给“抽奖按钮”添加【取消选中】的交互就可以，把所有扇形都取消选中，这样就可以全部变回默认颜色。

---

• 考虑在转的期间，会不会有人多次点击开始按钮，所以要在开始的时候，增加一个【禁用按钮】的交互，在结束的时候，用【启用】的交互防止这种情况的发生。

---