微信紅包雨特效(怎么在微信小程序中實現紅包雨功能)

wxml:

<viewwx:for="{{packetList}}"wx:for-index="index"wx:for-item="items"><imageclass="red-packet"src="{{items.src}}"></image></view>

wxss:

.red-packet{width:20px;height:25px;z-index:100;transition-property:transform,top;transform-origin:50%50%0;-webkit-transition-property:transform,top;-webkit-transform-origin:50%50%0;}

js:

Page({/***頁面的初始數據*/data:{windowWidth:"",//窗口寬度windowHeigh:"",//窗口高度packetList:[{}],//紅包隊列packetNum:200,//總共紅包的數量showInter:''//循環動畫定時器},/***生命周期函數--監聽頁面加載*/onLoad:function(options){varthat=this;//獲取手機屏幕寬高wx.getsysteminfo({success:function(res){that.setData({windowWidth:res.windowWidth,windowHeigh:res.windowHeight,top:res.windowHeight-100//設置紅包初始位置})}})//建立臨時紅包列表varpacketList=[];//建立臨時紅包圖片數組varsrcList=["../images/packet-one.png","../images/packet-two.png"];//生成初始化紅包for(vari=0;i<that.data.packetNum;i++){//生成隨機位置(水平位置)varleft=Math.random()*that.data.windowWidth-20;//優化位置,防止紅包越界現象,保證每個紅包都在屏幕之內if(left<0){left+=20;}elseif(left>that.data.windowWidth){left-=20;}//建立臨時單個紅包varpacket={src:srcList[Math.ceil(Math.random()*2)-1],top:-30,left:left,speed:Math.random()*2500+3000//生成隨機掉落時間,保證每個掉落時間保持在3秒到5.5秒之間}//將單個紅包裝入臨時紅包列表packetList.push(packet);//將生成的臨時紅包列表更新至頁面數據,頁面內進行渲染that.setData({packetList:packetList})}//初始化動畫執行當前索引vartempIndex=0;//開始定時器,每隔1秒掉落一次紅包that.data.showInter=setInterval(function(){//生成當前掉落紅包的個數,1-3個varshowNum=Math.ceil(Math.random()*3);//防止數組越界if(tempIndex*showNum>=that.data.packetNum){//如果所有預生成的紅包已經掉落完,清除定時器clearInterval(that.data.showInter);}else{switch(showNum){case1://設置臨時紅包列表當前索引下的top值,此處top值為動畫運動的最終top值packetList[tempIndex].top=that.data.windowHeigh;//當前次掉落幾個紅包,索引值就加幾tempIndex+=1;break;case2:packetList[tempIndex].top=that.data.windowHeigh;packetList[tempIndex+1].top=that.data.windowHeigh;tempIndex+=2;break;case3:packetList[tempIndex].top=that.data.windowHeigh;packetList[tempIndex+1].top=that.data.windowHeigh;packetList[tempIndex+2].top=that.data.windowHeigh;tempIndex+=3;break;default:console.log();}//更新紅包列表數據that.setData({packetList:packetList})}},1000)}})

看完上述內容,你們對怎么在微信小程序中實現紅包雨功能有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注本站行業資訊頻道,感謝大家的支持。