生活中购物的时候,经常会遇到一些可以抽奖的活动。很多时候,我们采用转盘抽签的形式。中了彩票自然很开心,但是这个转盘原型是怎么产生的呢?马上来看看吧!
我们来拍一张完整的图片,所有的布局结构,如下图:
步骤一:搭建组件
“转盘”:一个300300白底黑框的圆(大小适中即可),一条垂直线,一条45度垂直线,一条水平线,一条45度水平线。四条线组成8等份,放在圆心;对于抽奖凭证,在每个相等的部分放置一个文本标签,将上述所有组件组合起来,命名为“转盘”。
“抽奖按钮”和“抽奖指针”:一个100100的圆圈,灰色背景,黑色边框,中间文字为“抽奖”,命名为“抽奖按钮”,放置在转盘正上方;一个1030的三角形,灰色背景上有一个黑框,名为“彩票指针”,放在“彩票按钮”的正上方。
步骤二:为“抽奖按钮”添加鼠标点击时用例
只要一个用例就可以完成转盘抽奖效果啦
这个用例的动作:相对旋转转盘,角度为[[100000 Math.random()*360]],顺时针,锚产品设计作品点为中心,动画为线性,时间为2000毫秒(时间主要控制旋转的速度)。
这都搞定了axure官网。这个只需要一个用例,所以会相对简单。