HTML5抽獎轉盤-CSS3超簡單版本

網上有不少關於抽獎轉盤的代碼和實例，有使用JavaScript控制動畫的，有使用Canvas實現的，它們思路各不相同，本文將介紹一種採用CSS3的方式來實現轉盤動畫效果，很是簡單，只需幾行代碼便可實現。

效果演示

demo地址

核心思路

採用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看下具體的效果。

項目完整代碼Github，有用的給個Star！