前言
在各種活動中，我們經常會遇到使用轉盤抽獎，作為一名程式設計師，應該了解這種抽獎轉盤的實現原理，於是，我們今天就由示例來跟大家一起剖析微信小程序抽獎轉盤的實現。
微信小程序轉盤抽獎組件的實現思路
1.界面樣式實現
從抽獎轉盤的圖中我們可以看出，抽獎轉盤由外圓、扇面抽獎選項、抽獎按鈕組成，其中外圓不難實現，大家在處理微信小程序頭像的時候估計都已經用過了，那就是利用border-radius:50%來將一個正方形變成圓，這是外圓實現的關鍵。為了體現立體效果，我們給外圓的border加上陰影，也就是border-shadow樣式，這樣一處理，外圓的立體效果就出來了。
外圓裡面是抽獎的獎項，抽獎獎項由獎品名稱和一條線組成，通過將線和獎品名稱旋轉一定的角度就可以得到界面效果，這裡用到的主要功能是：transform: rotate。這裡說是線，其實是一個個的view通過設置width寬度和背景色而給人產生的視覺錯覺效果。因為每條線的旋轉角度不同，所以這個角度是在JS中計算後賦值到前臺的。下面是線和抽獎獎項的實現（註：代碼來自網絡）：
獎項再往裡是一個抽獎按鈕，這個抽獎按鈕設計得很巧妙，乍看是一個不規則的形狀，其實是一個由三角形和圓組合而成的形狀。圓大家都會了，那麼三角形是如何來實現的呢？其實三角形是由border來實現的，也就是說一個view，如果寬高都是0而border很大的話，通過設置border三個方向的顏色就能生成一個三角形（左右透明，底的顏色就是三角形的顏色，這是css畫三角形的一個技巧）。
好了，界面的組成和繪製原理給大家介紹完了，下面我們再來看看抽獎的事件。
2.轉盤的轉動和抽獎事件
首先我們需要通過JS的賦值來刻畫圓盤並將獎項賦值在轉盤上。這裡首先要通過JSON形式定義好獎項。
然後我們根據獎項的個數來計算扇面的角度和線旋轉的角度。 因為指針是在每個扇區的中間，所以需要除以2。
// 獎項列表
for (var i = 0; i < awards.length; i++) {
awardsList.push({ turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awards[i].name });
}
最後要處理的就是按鈕點擊事件了，抽獎實際上是一個隨機數的生成過程，根據隨機數的大小對應獎品的序號，抽獎結果也就產生了（這是等概率抽獎，如果有不等概率的需求可以再進一步研究）。實際上像抽獎這樣的，隨機數的生成是一個瞬間的過程，為了體現抽獎的動感，我們需要讓轉盤轉起來。
這裡我們來創建一個動畫：
var animationRun = wx.createAnimation({
duration: duration,
timingFunction: 'ease-in-out'
})
animationRun.rotate(this.runDeg).step();
因為圓是一個循環的，無論轉多少圈，在圓上的度數都是在0--360度之間，因此我們需要通過當前度數%360取餘的操作來顯示當前指針的位置。
最後，通過setTimeOut來讓指針轉動停下來。這樣最後轉動的效果也有了，只要根據隨機數把抽獎的結果反饋給抽獎的人就可以了。
結語
一個看似非常複雜的組件經過這麼一拆解，你是否能夠理解轉盤抽獎的實現原理了呢？請疑問請在下方評論給我。