1、”幸运大转盘“相对来说还是比较简单,也就布局上有些处理,新建”圆“,”箭头“,”按键“,”文本标签“(这里需要8个吧),及”水平线“(或”竖线“,需要4根)
2、设置”圆“尺寸为300*300,可以随意填充色,设置所需的边线颜色;设置”水平线“尺寸为300*1,线条颜色随意,并复制3份,分别旋转:45度、90度及135度,按下图方式布局:
3、这个时候,”圆“被等分了8份,当然可以随需求,分别划分不同的区块,以增加”奖项“或”中奖概率“;这里仅按”圆“8等份演示做说明~
4、”文本标签“复制8份,分别设醅呓择锗置不同”奖项“及设置不同的旋转角度;演示版本设置的旋转角度分别是:337.5度、292.5度、247.5度、202.5度、157.5度、112.5度、67.5度及22.5度;”文本标签“、”圆“、”水平线“组合,命名为"转盘"如下图所示布局:
5、设置”箭头“尺寸为200*10,填充色为#FF0000,并旋转为330度(可随意),置于”组合:转盘“上方的中间位置;设置”按键“内容为”转一转“;如下图所示布局:
6、现在让转盘,指针转起来~
7、设置”按键“的”鼠标单击时“的交互动作:
8、动作1:---设置”指针“旋转的角度为[[Math.random()*10000]觥终柯计],旋转方向:顺时针,锚点:中心,动画效果:缓进缓出,时间:5000毫秒---(Math.random()为随机数)
9、动作2:---设置”转盘“旋转的角度为[[Math.random()*5000]],旋转方向:逆时针,锚点:中心,动画效果:缓进缓出,时间:5000毫秒---(Math.random()为随机数)
10、恩,简简单单一”键“设置,美美哒的”幸运大转盘“完成了~
11、转起来,看看运气如何?
12、觉得不错的话,请投个票,加个赞哦~