小程序转盘功能实现
实现方法:Animation.rotate()
代码示例
.wxml
<!-- 转盘 -->
<image animation="{{cs_an}}" src="https://wx1.sbimg.cn/2020/09/24/GzvuO.png" class="pan_img" />
<!-- 操作 -->
<button bindtap="kai">开始抽奖</button>
<button bindtap="zhi">重置</button>
.wxss
/* 转盘图片 */
.pan_img {
width: 750rpx;
height: 750rpx;
}
.js
kai: function () {
console.log("开始");
var animation = wx.createAnimation({
duration: 5000, // 转圈时间
timingFunction: "ease",
});
// 转25圈+60°
animation.rotate(360 * 25 + 60).step();
this.setData({
cs_an: animation.export(),
});
},
zhi: function () {
console.log("重置");
var animation = wx.createAnimation({
duration: 0,
});
animation.rotate(0).step();
this.setData({
cs_an: animation.export(),
});
},