前端老虎機開發總結

最近一直在做動畫相關的東西，前段時間做了一個刮刮卡的，現在又做了一個老虎機的抽獎，都是之前沒接觸過的，現在總結一下老虎機的開發吧

 

 

 點擊搖獎，然後三個依次的轉動。我電腦上沒有生產gif的工具   想看效果  打開           此鏈接       查看效果

 1.首先頁面先加載jquery和jquery的插件easing.js    jquery.easing.js鏈接地址     jquery版本鏈接地址

 2.爲jquery擴展一個方法，作用是讓三列依次滾動，並且依次停止  ，代碼 如下：

  var isBegin = false;
  jQuery.fn.extend({
    slots: function (b, c, d) {
      if (isBegin) {
        return false
      }
      isBegin = true;
          
      $(this).css("backgroundPositionY", 0);
      $(this).each(function(e){

        setTimeout(()=>{
          $(this).animate({
            backgroundPositionY: (((b * 50) - (b * c[e])) / 150)+"rem"
          },{
            duration: 5000 + e * 1000,
            easing: "easeInOutCirc",
            complete: function () {
              if (e == 2) {
                isBegin = false;
                d()
              }
            }
          })
        },e*100)

      })
    }
  });

 

 3. 如何使用  ：使用起來很方便，比如我給搖獎添加點擊事件，點擊的回調裏執行老虎機轉動

$("body").on("click",".isBtnNumber",function(){
  $(".swp-item").slots(lhjHeight,r,function(){ 
    //停止轉動的回調
  })

})

 說明：老虎機內部轉動的部分，每一列的樣式名字都叫.swp-item  所以執行slots方法之後，需要傳遞三個參數，第一個是轉動每一個格子的大小，即可視區域的高度，第二個參數r代表轉動停止時，三列每列停止的位置，是一個數組例如["0.5","0.5","0.5"]、["2","2","2"]、["-1","-1","-1"],、["-2.5","-2.5","-2.5"],、["-4","-4","-4"],等，這是步長，三個數相同，說明步長相同，停的位置就相同

 結束。