微信小程序转盘抽奖

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({

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