实现方法: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",
});
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(),
});
},
已阅
感谢分享。建议做个代码片段更爽。
很好奇,你这样转的话那不是每次都转到同一个位置,中的同一个奖,居然没用随机功能?也没有中奖算法。
不过这个基本的转盘结合小程序的动画功能确实转起来了,效果还算入门了。
已阅