有需要写个积分抽奖功能,大题思路就有两个,一呢转盘上的内容使用文字,自己调整位置和角度,二呢使用整个的图片,优缺点一目了然。
比较懒就借鉴了第二种:
首先在js中全局定义:
//微信提供的创建动画的方法
const animation = wx.createAnimation({
duration: 6000,
timingFunction: 'ease'
})
Page({
//初始化角度
data:{
deg:0,
animationData:{}
}
move() {
//转盘共有六分,每个60°,所以30,90正指着中间,这都是可调整的,也可以定义在data中让程序自个计算,现在的随机数是为了模拟后端返回的那个中奖号码,
let arr = [30,90,150,210,270,330]
let madom =Math.floor( Math.random()*6)
let index = arr[madom]
)
//从当前角度开始旋转, 并重置与0点位置 7*360设置的多转几圈
let rotateAngle = this.data.deg - (this.data.deg % 360) + index + 7 * 360
animation.rotate(rotateAngle).step()
this.setData({
animationData :animation.export(),
deg: rotateAngle
})
},
})
wxml部分
<view class="rotate_box">
<image class='w_img' src="https://o3pvuu23u.qnssl.com/2f9bddd9-bb82-47ed-bd0f-9b1bee4463b8.png"
animation="{{animationData}}" />
<view class="startbox" bindtap="move">
<image class='start_img' src="https://o3pvuu23u.qnssl.com/e36952f5-0458-467b-890c-61941877c0c9.png" />
</view>
</view>
wxss部分
.startbox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.start_img{
width: 120rpx;
height: 120rpx;
}
.w_img{
width: 500rpx;
height: 500rpx;
}
.rotate_box{
text-align: center;
position: relative;
}