前言:

最近公司要求做一個抽獎的頁面,然后看到設計稿的一刻眉頭一皺,這事沒那么簡單

---

最開始是用translateY但是效果太生硬了而且不方便二次抽獎或者多次抽獎找了半天決定用3d來做成一個滾輪這樣的好處是支持多次旋轉往上加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}}等獎</text></view></view></view></view></view>  **** >總共是三列然后我這里創建了三個數組很多人肯定想其實一個數組就可以啦無非就是打亂下順序,但是我們要進行第二次抽獎的時候打亂數組順序頁面并不會更新,所以這里才會創建三個數組用來后續打亂數組隨機顯示,做了一個隨機處理抽獎的 為了區分前三等獎和其他的獎項不一致也不會導致看花眼 所以我在wxml寫了很多三目運算用來區分,上面主要結構以及數據的渲染,我們不多講。   start里面在進行數組重置之后開始轉動兩圈你也可以更改360一圈,sort是對數組重新進行排序根據字典序然后比較隨機值進行排序如果你需要哪一個抽獎的話直接加一個屬性prize就好了,話不多說了直接看效果圖源碼我會托管在github上面大家可以clone下來進行實驗

項目倉庫地址 對你有用的話不要吝嗇你的星星哦

這里就不做過多的贅述啦,代碼我已經放在github上,覺得好的就給個star吧,有時間我在開源出來當成組件

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。