本文為大家分享了微信小程序實現紅包雨的具體代碼，供大家參考，具體內容如下
今天有個小師妹來問我怎樣用微信小程序實現紅包雨效果，如果用web很好實現，但是小程序不是那么容易，整合自己也有一年沒摸過小程序了，決定試一試。
首先明確“紅包雨”的需求：
首先看看我做的效果吧
首先明確小程序實現紅包雨和web網頁實現紅包雨難點上有什么不同：
好了那么問題來了怎樣實現生成紅包雨呢？小程序無法直接操作dom也就意味著不能向dom內添加元素，這里我的解決辦法是先生成預設個數的紅包在視窗外部（用戶看不到），然后修改每個紅包的樣式來實現動畫（當然用css keyframes幀動畫也可以，我這里使用的是js修改屬性）
話不多說直接上代碼吧，代碼內有注釋
wxml：
<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>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) }})好了紅包雨就這樣實現了，其實還是蠻有意思的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
