小程序抽奖效果demo滚筒抽奖3d动画抽奖(附代码以及随机中奖处理)

前言:

最近公司要求做一个抽奖的页面,然后看到设计稿的一刻眉头一皱,这事没那么简单

---

最开始是用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吧,有时间我在开源出来当成组件