微信小程序转盘抽奖

来源：互联网发布：源mac目的mac地址编辑：程序博客网时间：2024/05/16 15:44

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

1 0