养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure设计:幸运大转盘

时间:2024-09-27 15:31:53

前两天,临时分享了个简易版”幸运大转盘“,可参考以下链接~虽然达成分享”转动“的效果演示,但客观性实在不咋地~所以今天重新完善下,做到有始有终~

Axure设计:幸运大转盘

工具/原料

AxureRP8

方法/步骤

1、”幸运大转盘“相对来说还是比较简单,也就布局上有些处理,新建”圆“,”箭头“,”按键“,”文本标签“(这里需要8个吧),及”水平线“(或”竖线“,需要4根)

Axure设计:幸运大转盘

2、设置”圆“尺寸为300*300,可以随意填充色,设置所需的边线颜色;设置”水平线“尺寸为300*1,线条颜色随意,并复制3份,分别旋转:45度、90度及135度,按下图方式布局:

Axure设计:幸运大转盘

3、这个时候,”圆“被等分了8份,当然可以随需求,分别划分不同的区块,以增加”奖项“或”中奖概率“;这里仅按”圆“8等份演示做说明~

4、”文本标签“复制8份,分别设醅呓择锗置不同”奖项“及设置不同的旋转角度;演示版本设置的旋转角度分别是:337.5度、292.5度、247.5度、202.5度、157.笙剽茑镙5度、112.5度、67.5度及22.5度;”文本标签“、”圆“、”水平线“组合,命名为"转盘"如下图所示布局:

Axure设计:幸运大转盘

5、设置”箭头“尺寸为200*10,填充色为#FF0000,并旋转为330度(可随意),置于”组合:转盘“上方的中间位置;设置”按键“内容为”转一转“;如下图所示布局:

Axure设计:幸运大转盘

6、现在让转盘,指针转起来~

7、设置”按键“的”鼠标单击时“的交互动作:

Axure设计:幸运大转盘

8、动作1:---设置”指针“旋转的角度为[[Math.random()*10000]觥终柯计],旋转方向:顺时针,锚点:中心,动画效果:缓进缓出,时间:5000毫秒---(Math.random()为随机数)

Axure设计:幸运大转盘

Axure设计:幸运大转盘

9、动作2:---设置”转盘“旋转的角度为[[Math.random()*5000]]水貔藻疽,旋转方向:逆时针,锚点:中心,动画效果:缓进缓出,时间:5000毫秒---(Math.random()为随机数)

Axure设计:幸运大转盘

Axure设计:幸运大转盘

10、恩,简简单单一”键“设置,美美哒的”幸运大转盘“完成了~

11、转起来,看看运气如何?

Axure设计:幸运大转盘

12、觉得不错的话,请投个票,加个赞哦~

© 一点知识