前言:

最近公司要求做一個(gè)抽獎(jiǎng)的頁面,然后看到設(shè)計(jì)稿的一刻眉頭一皺,這事沒那么簡單

---

最開始是用translateY但是效果太生硬了而且不方便二次抽獎(jiǎng)或者多次抽獎(jiǎng)?wù)伊税胩鞗Q定用3d來做成一個(gè)滾輪這樣的好處是支持多次旋轉(zhuǎn)往上加360°就好啦

---

首先第一步是布局

<view class="prizeContent-box"><image class="second" style="width: 100%; display: block;" src="./../../assets/images/lukey_bg_02.png" mode="widthFix" /><view class="prizeContent"><view class="prizeList" wx:for="{{[1,2,3]}}" wx:key="{{index}}"><view class="prizeBox" style=" transform: rotateX({{animation0}}deg); transition-duration:{{index==0?time0:index==1?time1:time2}}s"><view class="red-envelope" wx:for="{{index==0?redEnvelopeList0:index==1?redEnvelopeList1:redEnvelopeList2 }}" wx:for-index="i" wx:key="i" style="transform:rotateX({{(360/redEnvelopeList0.length)*(i) - 100}}deg) translateZ({{250}}rpx);padding-top:{{item.text=='一'?6:item.text=='二'?8:item.text=='三'? 4:2}}rpx;width:{{item.text=='一'?180:item.text=='二'?220:item.text=='三'? 220:90}}rpx"><image src="./../../assets/images/red_envelope{{item.text=='一'?1:item.text=='二'?2:item.text=='三'? 3:''}}.png" mode="widthFix" /><text wx:if="{{item.text=='一'?false:item.text=='二'?false:item.text=='三'? false:true}}">{{item.text}}等獎(jiǎng)</text></view></view></view></view></view>  **** >總共是三列然后我這里創(chuàng)建了三個(gè)數(shù)組很多人肯定想其實(shí)一個(gè)數(shù)組就可以啦無非就是打亂下順序,但是我們要進(jìn)行第二次抽獎(jiǎng)的時(shí)候打亂數(shù)組順序頁面并不會(huì)更新,所以這里才會(huì)創(chuàng)建三個(gè)數(shù)組用來后續(xù)打亂數(shù)組隨機(jī)顯示,做了一個(gè)隨機(jī)處理抽獎(jiǎng)的 為了區(qū)分前三等獎(jiǎng)和其他的獎(jiǎng)項(xiàng)不一致也不會(huì)導(dǎo)致看花眼 所以我在wxml寫了很多三目運(yùn)算用來區(qū)分,上面主要結(jié)構(gòu)以及數(shù)據(jù)的渲染,我們不多講。   start里面在進(jìn)行數(shù)組重置之后開始轉(zhuǎn)動(dòng)兩圈你也可以更改360一圈,sort是對數(shù)組重新進(jìn)行排序根據(jù)字典序然后比較隨機(jī)值進(jìn)行排序如果你需要哪一個(gè)抽獎(jiǎng)的話直接加一個(gè)屬性prize就好了,話不多說了直接看效果圖源碼我會(huì)托管在github上面大家可以clone下來進(jìn)行實(shí)驗(yàn)

項(xiàng)目倉庫地址 對你有用的話不要吝嗇你的星星哦

這里就不做過多的贅述啦,代碼我已經(jīng)放在github上,覺得好的就給個(gè)star吧,有時(shí)間我在開源出來當(dāng)成組件

總結(jié)

以上是生活随笔為你收集整理的小程序抽奖效果demo滚筒抽奖3d动画抽奖(附代码以及随机中奖处理)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。