微信小程序实现转盘、跑马灯效果

 

  一、布局相对来说比较简单，一个转盘及一个按钮叠加起来，转盘绑定动画，按钮绑定点击事件

        1.定义抽奖弹框

<modal title="恭喜您"
  hidden="{{hiddenModal}}"
  confirm-text="确定"
  no-cancel="true"
  bindconfirm="listenerConfirm" > {{detail}} 
</modal>

       2.转盘布局圆盘及中间按钮

<view style="width:100%;height：100%;display:flex;flex-direction:column;align-items: center;justify-content: center;">

<!-- 转盘 -->
<view style="width:100%;height：100%;display:flex;flex-direction:column;align-items: center;justify-content: center;">

<!-- 按钮 -->
<view style="width:100%;height：100%;display:flex;flex-direction:column;align-items: center;justify-content: center;">

       3.js数据绑定

data: {
    animationData:{},//动画
    isclick: "start",//按钮事件
    image:"/images/dianji_choujiang.png",//转盘图片
    hiddenModal:true,//弹框是否隐藏
    detail: "恭喜您获得"+luck[which-1]//弹框内容
  },

       4.如果要让旋转动画持续进行，需要使旋转角度越来越大，或者每次重置动画（此处采用前者）。

//启动动画
    function star() {
      console.log("开始动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 300,
        timingFunction: "linear"
      });
      animation.rotate(360*n).step();
      this.setData({
        animationData: animation.export(),
        image: "/images/dianji_tingzhi.png"
      })
    }

注意：

 animation.rotate(360*n).step();

 n为旋转标记，保证旋转角度越来越大   ====》  通过Timer计时器实现n的递增

timer = setInterval(function () {
      //开始旋转
      star.call(_this);
      //
      n++;
    }

       5.停止动画

                     动画停止需要有一个逐渐缓慢的效果，并且需要指定奖项，指针在该奖项随机位置

 function sto() {
      console.log("重置动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 1.4 * (2160 - (which - 1) * 60),
        timingFunction: "ease-out"
      });
      console.log(Math.random()*60); 
      animation.rotate(360 * n + (2160 - ((which-2) * 60) - 35 - (Math.random() * 50))).step();
      this.setData({
        animationData: animation.export(),
        image: "/images/dianji_choujiang.png",
      })
    }

注意：

 2160 - (which - 1) * 60：此为定义奖项后旋转角度  1.4为每度消耗时间。

 animation.rotate(360 * n + (2160 - ((which-2) * 60) - 35 - (Math.random() * 50))).step();旋转至指定角度范围内.

       6.显示弹框

               因为在文档上未找到动画结束的监听，所以此处我使用延时的方法，在停止动画播放结束后，弹出弹框，提示用户。

timer = setTimeout(function () {
      _this.setData({
        hiddenModal: false
      })
    }
      , 1.4 * (2160 - (which - 1) * 60+300));

       7.确定

             点击确定后重置动画

listenerConfirm: function (e) {
      var _this = this;
      this.setData({
        hiddenModal:true,
        isclick: "start"
      })
      reset.call(_this);
      function reset() {
        console.log("重置动画.....")
        var animation = wx.createAnimation({
          transformOrigin: "50% 50%",
          duration: 0,
          timingFunction: "linear"
        });
        animation.rotate(0).step();
        this.setData({
          animationData: animation.export()
        })
      }
    }