效果圖
抽獎功能主要運用css動畫及js控制動畫邏輯蟆淀，整體難度不大拯啦，完成整個抽獎邏輯功能需要比較嚴(yán)謹(jǐn)?shù)倪壿嬙璺耍灰韵率菍崿F(xiàn)此功能的代碼
// lottery.wxml
// 抽獎數(shù)字
<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}}步數(shù)</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">剩余次數(shù)</text>
<text class="times">{{residueDegree}}</text>
</view>
<view class="right">
<button type="default" plain="true" hover-class="none">立即抽獎</button>
</view>
</view>
</button>
</view>
按鈕部分主要控制點擊事件時控制兩張圖顯示隱藏達(dá)到按鈕動態(tài)按下的效果
.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: {
// 滾動數(shù)字
numberArr1: numbers,
numberArr2: numbers,
numberArr3: numbers,
// 記錄當(dāng)前旋轉(zhuǎn)度數(shù)
animation1: 0,
animation2: 0,
animation3: 0,
// 百十分?jǐn)?shù)字滾動持續(xù)時間
durationTime1: 2,
durationTime2: 3,
durationTime3: 4,
// 記錄當(dāng)前滾動數(shù)字
number1: 0,
number2: 0,
number3: 0,
residueDegree: 0, // 剩余抽獎次數(shù)
},
// 初始化步數(shù)信息
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), // 剩余抽獎次數(shù)
stepSingle: data.stepFunThresholdNum
})
}
})
},
抽獎事件
*/
start(event, a = 1, b = 2, c = 3) {
let self = this
self.initInfo()
// 判斷當(dāng)前步數(shù)是否有抽獎機(jī)會
if (this.data.residueDegree <= 0) {
self.setData({
lotteryCommonType: 'earnStep',
lotteryCommonPopupShow: true,
maskShow: true
})
return
}
// 判斷距離上次執(zhí)行5s內(nèi)禁止再次抽獎
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
// 記錄當(dāng)前的滾動數(shù)值
let [number1, number2, number3] = [self.data.number1, self.data.number2, self.data.number3]
// 要轉(zhuǎn)動的度數(shù)
let [rotateDeg1, rotateDeg2, rotateDeg3] = [0, 0, 0]
// 百位數(shù)數(shù)字轉(zhuǎn)動判斷
if (number1 - async1 >= 0) {
rotateDeg1 = (number1 - async1) * 36
} else {
rotateDeg1 = (number1 - async1) * 36 + 720
}
// 十位數(shù)數(shù)字轉(zhuǎn)動判斷
if (number2 - async2 >= 0) {
rotateDeg2 = (number2 - async2) * 36
} else {
rotateDeg2 = (number2 - async2) * 36 + 720
}
// 個位數(shù)數(shù)字轉(zhuǎn)動判斷
if (number2 - async3 >= 0) {
rotateDeg3 = (number3 - async3) * 36
} else {
rotateDeg3 = (number3 - async3) * 36 + 720
}
// 重置數(shù)組順序后轉(zhuǎn)動兩圈
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內(nèi)只執(zhí)行一次抽獎
timer = setTimeout(() => {
// 顯示中獎彈框內(nèi)容
self.prizePopupJudge(response)
self.data.repeatFlag = true
clearTimeout(timer)
}, 5000)
},
