網上有很多關於抽獎轉盤的代碼和實例，有使用JavaScript控制動畫的，有使用Canvas實現的，它們思路各不相同，本文將介紹一種採用CSS3的方式來實現轉盤動畫效果，非常簡單，只需幾行代碼即可實現。
核心思路
採用CSS3的transition（過渡效果），給定需要旋轉的元素設置transform的rotate屬性的結束角度，同時添加transition-timing-function來控制旋轉的速率包括起始速率和結束速率，代碼如下（瀏覽器前綴可自行添加）：
#pointer { transition: transform 6.5s; transition-timing-function: ease-in-out; }
這樣，給定結束角度後，元素就會旋轉，結束角度可以自由控制旋轉的圈數，例如結束角度爲angelEnd，即圈數m=angelEnd/360 並取整，前幾圈轉滿360無需特殊處理，關鍵是最後一圈的角度決定了抽獎的結果，代碼如下：
let base = 2160; //先轉滿360×6圈let result = getRandom(-30,330); // 最後一圈角度，獲取-30到330的隨機數let angelEnd = -(base+result)// 結束角度數，負數代表逆時針旋轉$("#pointer").css({"transform":"rotate("+angelEnd+"deg)"});// 設置CSS
判斷抽獎結果
通過監聽旋轉元素的transitionend獲得動畫結束的事件，在此回調中，可以判斷抽獎結果，同時結合獎品數據及獎品的角度區間來計算，代碼如下：
gifts = {"1":{ angleStart : -30, angleEnd : 30, tips : "恭喜您獲得理財金2000元~~" },"2":{ angleStart : 31, angleEnd : 90, tips : "恭喜您獲得理財金1000元~~" },"3":{ angleStart : 91, angleEnd : 150, tips : "很遺憾沒有能中獎，再試一次吧~" },"4":{ angleStart : 151, angleEnd : 210, tips : "恭喜您抽中京東E卡一張~" },"5":{ angleStart : 211, angleEnd : 270, tips : "恭喜您獲得理財金5200元~~" },"6":{ angleStart : 271, angleEnd : 330, tips : "很遺憾沒有能中獎，再試一次吧~" }$("#pointer").on('transitionend',function(){ for (var key in gifts){ // 最後一圈的角度落在哪個獎品區間if (options.gifts[key].angleStart <= result && result<=options.gifts[key].angleEnd) { // 得到獎品的key值 alert(options.gifts[key].tips); } } })
設定指定獎品
每個抽獎程序都可能預留內部接口，轉盤也不例外，通過設置最後一圈的角度數即可提前設置獎品結果，代碼如下：
let _key = null; // 內定獎品id
if (_key) { result = getRandom(gifts[_key].angleStart,gifts[_key].angleEnd) }
到此爲止，一個簡單的轉盤抽獎程序就完成了，根據上面的思路，不僅可以旋轉指針，也可以旋轉圓盤，各位可以體驗一下demo看下具體的效果。
