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

今天就跟大家聊聊有關怎么在微信小程序中實現紅包雨功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

wxml：

<view wx:for="{{packetList}}" wx:for-index="index" wx:for-item="items">
 <image class="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) {
 var that = this;
 
 // 獲取手機屏幕寬高
 wx.getSystemInfo({
  success: function (res) {
  that.setData({
   windowWidth: res.windowWidth,
   windowHeigh: res.windowHeight,
   top: res.windowHeight-100 //設置紅包初始位置
  })
  }
 })
 
 //建立臨時紅包列表
 var packetList=[];
 //建立臨時紅包圖片數組
 var srcList = ["../images/packet-one.png", "../images/packet-two.png"];
 //生成初始化紅包
 for(var i=0;i<that.data.packetNum;i++){
  // 生成隨機位置（水平位置）
  var left = Math.random() * that.data.windowWidth-20;
  // 優化位置，防止紅包越界現象，保證每個紅包都在屏幕之內
  if(left<0){
  left+=20;
  } else if (left > that.data.windowWidth){
  left-=20;
  }
  // 建立臨時單個紅包
  var packet = {
  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
  })
 }
 
 // 初始化動畫執行當前索引
 var tempIndex=0;
 // 開始定時器，每隔1秒掉落一次紅包
 that.data.showInter=setInterval(function(){
  // 生成當前掉落紅包的個數，1-3個
  var showNum = Math.ceil(Math.random() * 3);
  // 防止數組越界
  if (tempIndex * showNum>=that.data.packetNum){
  // 如果所有預生成的紅包已經掉落完，清除定時器
  clearInterval(that.data.showInter);
  }else{
  switch (showNum){
   case 1:
   //設置臨時紅包列表當前索引下的top值，此處top值為動畫運動的最終top值 
   packetList[tempIndex].top = that.data.windowHeigh;
   // 當前次掉落幾個紅包，索引值就加幾
   tempIndex+=1;
   break;
   case 2:
   packetList[tempIndex].top = that.data.windowHeigh;
   packetList[tempIndex + 1].top = that.data.windowHeigh;
   tempIndex+=2;
   break;
   case 3:
   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)
 }
})

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