生活中在购物的时候经常会遇到一些可以抽奖的活动，很多时候都采用转盘抽奖的形式，抽中奖自然很开心啦，但是这个转盘原型是怎样做出来的呢，马上来看下吧！

　　先来个完整图，所有的布局结构，如下图：

　　步骤一：搭建组件

　　“转盘”：一个300×300白底黑框的圆形（大小适中就可以），一条垂直线，一条45度垂直线，一条水平线，一条45度水平线，四条线组成8等份，放置在圆形的正中；每一等份放置一个文本标签，用于抽奖凭证，以上所有组件组合并命名为“转盘”。

　　“抽奖按钮”与“抽奖指针”：一个100×100的灰底黑框圆形，中间文字为“抽奖”，命名为“抽奖按钮”，并放置于转盘的正上方；一个10×30的灰底黑框的三角形，命名为“抽奖指针”并放置于“抽奖按钮”正上方。

　　步骤二：为“抽奖按钮”添加鼠标点击时用例（只要一个用例就可以完成转盘抽奖效果啦）

　　该用例动作：相对旋转转盘，角度为[[100000+Math.random()*360]]，顺时针方向，锚点为中心，动画为线性，时间为2000毫秒（时间主要控制转的速度）。

　　这样就全部完成了，这个只用设置一个用例，所以相对会简单一些。

　　弄好赶紧看看预览效果：http://127.0.0.1:32767/start.html#p=index&g=1

　　本文由 @方子 原创发布于人人都是产品经理。未经许可，禁止转载

　　题图来自Unsplash，基于CC0协议