1.前言
2.在各种活动中，我们经常会遇到使用转盘抽奖，作为一名程序员，应该了解这种抽奖转盘的实现原理，于是，我们今天就由示例来跟大家一起剖析微信小程序抽奖转盘的实现。
3.微信小程序转盘抽奖组件的实现思路
4.1.界面样式实现
5.从抽奖转盘的图中我们可以看出，抽奖转盘由外圆、扇面抽奖选项、抽奖按钮组成，其中外圆不难实现，大家在处理微信小程序头像的时候估计都已经用过了，那就是利用border-radius:50%来将一个正方形变成圆，这是外圆实现的关键。为了体现立体效果，我们给外圆的border加上阴影，也就是border-shadow样式，这样一处理，外圆的立体效果就出来了。
6.外圆里面是抽奖的奖项，抽奖奖项由奖品名称和一条线组成，通过将线和奖品名称旋转一定的角度就可以得到界面效果，这里用到的主要功能是：transform: rotate。这里说是线，其实是一个个的view通过设置width宽度和背景色而给人产生的视觉错觉效果。因为每条线的旋转角度不同，所以这个角度是在JS中计算后赋值到前台的。下面是线和抽奖奖项的实现（注：代码来自网络）：
7.奖项再往里是一个抽奖按钮，这个抽奖按钮设计得很巧妙，乍看是一个不规则的形状，其实是一个由三角形和圆组合而成的形状。圆大家都会了，那么三角形是如何来实现的呢？其实三角形是由border来实现的，也就是说一个view，如果宽高都是0而border很大的话，通过设置border三个方向的颜色就能生成一个三角形（左右透明，底的颜色就是三角形的颜色，这是css画三角形的一个技巧）。
8.好了，界面的组成和绘制原理给大家介绍完了，下面我们再来看看抽奖的事件。
9.2.转盘的转动和抽奖事件
10.首先我们需要通过JS的赋值来刻画圆盘并将奖项赋值在转盘上。这里首先要通过JSON形式定义好奖项。
11.然后我们根据奖项的个数来计算扇面的角度和线旋转的角度。 因为指针是在每个扇区的中间，所以需要除以2。
12.// 奖项列表
13.for (var i = 0; i < awards.length; i++) {
14.awardsList.push({ turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awards[i].name });
15.}
16.最后要处理的就是按钮点击事件了，抽奖实际上是一个随机数的生成过程，根据随机数的大小对应奖品的序号，抽奖结果也就产生了（这是等概率抽奖，如果有不等概率的需求可以再进一步研究）。实际上像抽奖这样的，随机数的生成是一个瞬间的过程，为了体现抽奖的动感，我们需要让转盘转起来。
17.这里我们来创建一个动画：
18.var animationRun = wx.createAnimation({
19.duration: duration,
20.timingFunction: 'ease-in-out'
21.})
22.animationRun.rotate(this.runDeg).step();
23.因为圆是一个循环的，无论转多少圈，在圆上的度数都是在0--360度之间，因此我们需要通过当前度数%360取余的操作来显示当前指针的位置。
24.最后，通过setTimeOut来让指针转动停下来。这样最后转动的效果也有了，只要根据随机数把抽奖的结果反馈给抽奖的人就可以了。
25.结语
26.一个看似非常复杂的组件经过这么一拆解，你是否能够理解转盘抽奖的实现原理了呢？请疑问请在下方评论给我。
