<view wx:for="{{packetList}}" wx:for-index="index" wx:for-item="items"> <image class="red-packet" src="{{items.src}}" style="position:fixed;top:{{items.top}}px;left:{{items.left}}px;-webkit-transition:{{items.speed}}ms linear 0ms;transition:{{items.speed}}ms linear 0ms"> </image></view>

.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;}

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) }})