微信小程序转盘大抽奖

有需要写个积分抽奖功能，大题思路就有两个，一呢转盘上的内容使用文字，自己调整位置和角度，二呢使用整个的图片，优缺点一目了然。

比较懒就借鉴了第二种：

首先在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部分

animation="{{animationData}}" />

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;

}