微信小程序转盘抽奖

1.定义抽奖弹框

   .wxml

<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;">

<!-- 转盘 -->

<image animation="{{animationData}}" style="width:600rpx;height:600rpx;margin-top:20rpx" src="/images/jiangxiang.png"></image>

<!-- 按钮 -->

<image style="width:130rpx;height:160rpx;position:absolute;" src="{{image}}" bindtap="{{isclick}}" disabled="{{disabled}}"></image>
</view>

 

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

 

3.js

var which = 1;//中奖项
var luck = ["5积分", "5金币", "10积分", "10金币", "谢谢参与", "20金币"];//定义奖项

数据绑定

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()
        })
      }
    }

完整代码：

   .wxss

  

/**index.wxss**/
page {  
  height: 100%;
  background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494584697981&di=c7ad570951648abb02276d3e09ec5894&imgtype=0&src=http%3A%2F%2Fwww.appjzy.com%2FUploadFiles%2FImages%2FWallpaper%2F2016%2F01%2F1380bz201601221008076134.jpg");
  display: flex;
  background-repeat:no-repeat;
  background-size: 100% 100%;
}  

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

 

 .wxml

 

<!--index.wxml-->
<!--弹出框-->
<modal 
 title="恭喜您"
  hidden="{{hiddenModal}}"
  confirm-text="确定"
  no-cancel="true"
  bindconfirm="listenerConfirm" > {{detail}} </modal>
<view style="width:100%;height：100%;display:flex;flex-direction:column;align-items: center;justify-content: center;">
<image animation="{{animationData}}" style="width:600rpx;height:600rpx;margin-top:20rpx" src="/images/jiangxiang.png"></image>
<image style="width:130rpx;height:160rpx;position:absolute;" src="{{image}}" bindtap="{{isclick}}" disabled="{{disabled}}"></image>
</view>

 

.js

//index.js
//获取应用实例
var app = getApp()
var cxt_arc;
var timer;
var n=1;
var timer;
var which = 1;//中奖项
var luck = ["5积分", "5金币", "10积分", "10金币", "谢谢参与", "20金币"];//定义奖项
Page({
  data: {
    animationData:{},//动画
    isclick: "start",//按钮事件
    image:"/images/dianji_choujiang.png",//转盘图片
    hiddenModal:true,//弹框是否隐藏
    detail: "恭喜您获得"+luck[which-1]//弹框内容
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  },
  
  start: function (e) {
    var _this = this;
    n=1;
    this.setData({
      isclick: "stop"
    })
    reset.call(_this);
    timer = setInterval(function () {
      //开始旋转
      star.call(_this);
      //
      n++;
    }
      , 300);
     //启动动画
    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"
      })
    }
    //重置动画
    function reset() {
      console.log("重置动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 0,
        timingFunction: "linear"
      });
      animation.rotate(0).step();
      this.setData({
        animationData: animation.export()
      })
    }

  },
  stop: function (e) {
    var _this = this;
    this.setData({
      isclick:""
    })
    clearInterval(timer);
    timer = null;
    console.log("结束动画.....");
    sto.call(_this);
    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",
      })
    }

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

  },
  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()
        })
      }
    }
})