最近遇到做活动抽奖要用转盘,记录下做个笔记。
最终效果图:
xml部分:
<view class="draw-container">
<view class="draw-table-box">
<image animation="{{animationData}}" src="{{tableBg}}" class="draw-table-bg"/>
<image bindtap="tableroll" src="{{go}}" class="draw-table-go {{times?'':'draw-table-go-grey'}}"/>
</view>
<view>剩余抽奖次数: {{times}}</view>
</view>
css部分:
.draw-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40rpx;
}
.draw-table-box {
width: 556rpx;
height: 558rpx;
position: relative;
}
.draw-table-bg {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.draw-table-go {
width: 148rpx;
height: 192rpx;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.draw-table-go-grey {
filter: grayscale(100%);
filter: gray;
}
js部分:
Page({
data: {
tableBg: 'https://o3pvuu23u.qnssl.com/2f9bddd9-bb82-47ed-bd0f-9b1bee4463b8.png',
go: 'https://o3pvuu23u.qnssl.com/e36952f5-0458-467b-890c-61941877c0c9.png',
animationData: {},
singleDeg: 60, //单个奖项的角度
i: 4, // 自测中奖初始值
initDeg: 0,
awards: [
{id: 6, degree: '6等奖', name: 'iphone xs'},
{id: 3, degree: '1等奖', name: '50积分'},
{id: 4, degree: '2等奖', name: '10积分'},
{id: 5, degree: '3等奖', name: '5积分'},
{id: 2, degree: '4等奖', name: '2积分'},
{id: 1, degree: '5等奖', name: '1积分'},
],
times: 3,
isClick: false, // 转盘转动时防止用户再次点击抽奖
},
onLoad() {
},
onShow() {
// 创建一个动画实例
var animation = wx.createAnimation({
duration: 2000,
timingFunction: 'ease',
})
this.animation = animation
},
tableroll() {
if(this.data.isClick) return
if(this.data.times<1) return
console.log('触发抽奖=====')
this.setData({
isClick: true
})
let randomNum = Math.random()
let deviation = randomNum > 0.5 ? randomNum - 0.1 : randomNum + 0.1
this.mockDrawInfo().then((result) => {
let res1 = this.data.awards.filter((item)=> {
return item.degree == result.degree
})
this.data.i++
if(this.data.i===7) {
this.data.i = 1
}
console.log('mockDrawInfo==result=======res1[0]', result, res1[0])
let rotateDeg = 60 * (res1[0].id - deviation) + 360
console.log('rotateDeg===', rotateDeg, res1[0].id)
let surplusDeg = (Math.floor(Math.random()*4) + 4) * 360
this.animation.rotate(this.data.initDeg + rotateDeg + surplusDeg).step()
this.data.initDeg += surplusDeg
this.setData({
animationData: this.animation.export(),
})
setTimeout(() => {
this.setData({
isClick: false,
times:--this.data.times,
})
}, 2000)
})
},
// 模拟中奖信息接口返回数据
mockDrawInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({degree: this.data.i+'等奖'})
}, 1000)
})
}
})