效果图如下所示:
———————— wxml代码示例:
<view class="body">
<view class="box">
<image class="bg" src="{{bg}}" animation="{{animationRotate}}"></image>
<image bindtap="lottery" class="arrows {{isTurnOver?'':'grayscale'}}" src="{{arrows}}">
</image>
</view>
</view>
———————————— wxss代码示例:
.body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.box {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 600rpx;
height: 600rpx;
}
.box .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .arrows {
position: relative;
top: -28rpx;
width: 200rpx;
height: 249rpx;
}
.grayscale {
filter: grayscale(70%);
}
————————— js代码示例:
Page({
data: {
// 转盘奖品背景
bg: "/static/zp.png",
// 转盘箭头抽奖按钮
arrows: "/static/dj.png",
// 抽奖状态,是否转完了
isTurnOver: true
},
// 点击抽奖按钮
lottery() {
// 如果不在抽奖状态中,则执行抽奖旋转动画
if (this.data.isTurnOver) {
// 把抽奖状态改为未完成
this.setData({
isTurnOver: false
})
// 调取后端接口拿到抽奖后返回的ID ----省略
let prize_id = 5;
// 调用旋转动画方法
this.rotate(prize_id)
} else {
wx.showToast({
title: '请勿重复点击',
icon: 'none'
})
}
},
// 旋转动画方法
rotate(prize_id) {
// 执行完动画所需要的时间
let _duration = 10000;
let animationRotate = wx.createAnimation({
duration: _duration,
timingFunction: 'ease', //动画以低速开始,然后加快,在结束前变慢
})
// 解决二次点击抽奖后不再旋转的问题
animationRotate.rotate(0).step({
duration: 1
})
/*
* 旋转的角度
* 转盘有6个奖项,所以一个奖项的度数为:360除以6等于60、
* 要转完一圈 → 60 * 6
* 设置动画转十全 → 60 * 6 * 10
* 又因为转盘是顺时针旋转的,默认指定奖品1
* 所以需要减去 → 60 * (prize_id - 1) 方可在最后一圈转到对应的位置
* */
let angle = (60 * 6 * 10) - 60 * (prize_id - 1);
animationRotate.rotate(angle).step()
this.setData({
animationRotate: animationRotate.export()
})
// 设置倒计时,保证最后一圈执行完了,才更改状态
setTimeout(() => {
this.setData({
isTurnOver: true
})
// 弹出中奖提示框
wx.showModal({
title: '恭喜您',
content: `抽中了${prize_id}号奖品`,
showCancel: false
});
}, _duration)
}
})