前端老虎机开发总结

最近一直在做动画相关的东西，前段时间做了一个刮刮卡的，现在又做了一个老虎机的抽奖，都是之前没接触过的，现在总结一下老虎机的开发吧

 

 

 点击摇奖，然后三个依次的转动。我电脑上没有生产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"],等，这是步长，三个数相同，说明步长相同，停的位置就相同

 结束。