效果图
抽奖功能主要运用css动画及js控制动画逻辑，整体难度不大，完成整个抽奖逻辑功能需要比较严谨的逻辑，一以下是实现此功能的代码
// lottery.wxml
// 抽奖数字
<view class="lamp-box">
<image class="first" style="width: 100%; display: block;" src="./../../images/lottery/lukey_bg_01.png" mode="widthFix" />
</view>
<view class="prizeContent-box">
<image class="second" style="width: 100%; display: block;" src="./../../images/lottery/lukey_bg_02.png" mode="widthFix" />
<view class="expend-text">每抽一次消耗{{stepSingle}}步数</view>
<view class="prizeContent">
<view class="prizeList" wx:for="{{[1,2,3]}}" wx:key="{{index}}">
<view class="prizeBox" style=" transform: rotateX({{index==0?animation1:index==1?animation2:animation3}}deg); transition-duration:{{index==0?durationTime1:index==1?durationTime2:durationTime3}}s">
<view class="red-envelope" wx:for="{{index==0?numberArr1:index==1?numberArr2:numberArr3}}" wx:for-index="i" wx:key="i" style="transform:rotateX({{36*(i)}}deg) translateZ(400rpx);padding-top:0rpx;">
<view class="text">
{{item}}
</view>
</view>
</view>
</view>
</view>
</view>
// 按钮
<view class="btn-box">
<image class="three" style="width: 100%; display: block;" src="./../../images/lottery/lukey.png" mode="widthFix" />
<button class="btn" type="default" bindtap='start' plain="{{true}}" hover-class="none">
<image src="./../../images/lottery/btn.png" mode="widthFix" class="up" />
<image src="./../../images/lottery/btn_press.png" mode="widthFix" class="press" />
<view class="text">
<view class="left">
<text class="chance">剩余次数</text>
<text class="times">{{residueDegree}}</text>
</view>
<view class="right">
<button type="default" plain="true" hover-class="none">立即抽奖</button>
</view>
</view>
</button>
</view>
按钮部分主要控制点击事件时控制两张图显示隐藏达到按钮动态按下的效果
.prizeContent-box {
position: relative;
overflow: hidden;
perspective: 1000px;
}
.prizeContent-box .expend-text{
position: absolute;
top: -5rpx;
left: 0;
width: 100%;
text-align: center;
font-size: 26rpx;
font-family:PingFangSC-Regular;
font-weight: 400;
color:rgba(205,69,0,1);
line-height: 37rpx;
z-index: 10;
}
.prizeContent-box image.second {
position: relative;
z-index: 9;
}
.luckyDraw .main .prizeContent {
width: 490rpx;
height: 254rpx;
overflow: hidden;
border-radius: 16rpx;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
top: 57rpx;
z-index: 10;
margin-left: -246rpx;
}
.prizeBox {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
width: 100%;
height: 256rpx;
display: flex;
justify-content: center;
transform-origin: 50% 50%;
animation-timing-function: ease;
}
.luckyDraw .main .prizeContent .prizeList {
width: 154rpx;
height: 260rpx;
position: relative;
background-color: #fff;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.prizeContent .prizeList .red-envelope {
width: 132rpx;
height: 256rpx;
line-height: 256rpx;
position: absolute;
left: 50%;
top: 0;
margin-left: -66rpx;
/* transform-origin: center;
display: flex;
justify-content: center;
align-items: center; */
}
.prizeContent .prizeList .red-envelope .text {
/* width: 120rpx; */
text-align: center;
font-size: 120rpx;
font-weight:900;
color:rgba(51,51,51,1);
font-family: Arial, Helvetica, sans-serif;
}
data: {
// 滚动数字
numberArr1: numbers,
numberArr2: numbers,
numberArr3: numbers,
// 记录当前旋转度数
animation1: 0,
animation2: 0,
animation3: 0,
// 百十分数字滚动持续时间
durationTime1: 2,
durationTime2: 3,
durationTime3: 4,
// 记录当前滚动数字
number1: 0,
number2: 0,
number3: 0,
residueDegree: 0, // 剩余抽奖次数
},
// 初始化步数信息
initStepInfo() {
let self = this;
wx.request({
url: '/lotter/getStep',
method: 'GET',
success(res) {
let data = res.data.data;
self.setData({
residueDegree: parseInt(data.todayStepNum / data.stepFunThresholdNum), // 剩余抽奖次数
stepSingle: data.stepFunThresholdNum
})
}
})
},
抽奖事件
*/
start(event, a = 1, b = 2, c = 3) {
let self = this
self.initInfo()
// 判断当前步数是否有抽奖机会
if (this.data.residueDegree <= 0) {
self.setData({
lotteryCommonType: 'earnStep',
lotteryCommonPopupShow: true,
maskShow: true
})
return
}
// 判断距离上次执行5s内禁止再次抽奖
if (!self.data.repeatFlag) {
return
}
self.data.repeatFlag = false
// 获取抽奖信息
wx.request({
url: '/executelottery',
method: 'POST',
data: {},
success(res) {
if (res.data.code == 1 && res.data.data) {
let data = res.data.data
let lotteryNum = data.lotteryNum;
let [async1, async2, async3] = [lotteryNum.substring(0, 1), lotteryNum.substring(1, 2), lotteryNum.substring(2, 3)]
self.lottery(async1, async2, async3, data)
} else {
self.data.repeatFlag = true
}
}
})
},
// 获取后端返回抽奖信息
lottery(async1, async2, async3, response) {
let timer = null
let self = this
// 记录当前的滚动数值
let [number1, number2, number3] = [self.data.number1, self.data.number2, self.data.number3]
// 要转动的度数
let [rotateDeg1, rotateDeg2, rotateDeg3] = [0, 0, 0]
// 百位数数字转动判断
if (number1 - async1 >= 0) {
rotateDeg1 = (number1 - async1) * 36
} else {
rotateDeg1 = (number1 - async1) * 36 + 720
}
// 十位数数字转动判断
if (number2 - async2 >= 0) {
rotateDeg2 = (number2 - async2) * 36
} else {
rotateDeg2 = (number2 - async2) * 36 + 720
}
// 个位数数字转动判断
if (number2 - async3 >= 0) {
rotateDeg3 = (number3 - async3) * 36
} else {
rotateDeg3 = (number3 - async3) * 36 + 720
}
// 重置数组顺序后转动两圈
self.setData({
number1: async1,
number2: async2,
number3: async3,
animation1: self.data.animation1 + 720 + rotateDeg1,
animation2: self.data.animation2 + 720 + rotateDeg2,
animation3: self.data.animation3 + 720 + rotateDeg3
})
// 5s内只执行一次抽奖
timer = setTimeout(() => {
// 显示中奖弹框内容
self.prizePopupJudge(response)
self.data.repeatFlag = true
clearTimeout(timer)
}, 5000)
},
网友评论