一、布局相对来说比较简单,一个转盘及一个按钮叠加起来,转盘绑定动画,按钮绑定点击事件
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()
})
}
}