微信小程序?qū)崿F(xiàn)紅包雨功能
本文為大家分享了微信小程序?qū)崿F(xiàn)紅包雨的具體代碼,供大家參考,具體內(nèi)容如下
今天有個小師妹來問我怎樣用微信小程序?qū)崿F(xiàn)紅包雨效果,如果用web很好實現(xiàn),但是小程序不是那么容易,整合自己也有一年沒摸過小程序了,決定試一試。
首先明確“紅包雨”的需求:
- 隨機(jī)位置掉落
- 隨機(jī)紅包樣式
- 同一時間掉落個數(shù)隨機(jī)
- 每個紅包的掉落速度隨機(jī),但不能太快也不能太慢
首先看看我做的效果吧
首先明確小程序?qū)崿F(xiàn)紅包雨和web網(wǎng)頁實現(xiàn)紅包雨難點(diǎn)上有什么不同:
- 小程序不能直接操作dom,web網(wǎng)頁可以操作
- 小程序循環(huán)渲染wx:for內(nèi)無法執(zhí)行animation,web網(wǎng)頁中animation執(zhí)行無條件約束
- 小程序修改樣式屬性需要通過數(shù)據(jù)綁定無法直接修改,web網(wǎng)頁可以直接取dom元素進(jìn)行修改
好了那么問題來了怎樣實現(xiàn)生成紅包雨呢?小程序無法直接操作dom也就意味著不能向dom內(nèi)添加元素,這里我的解決辦法是先生成預(yù)設(shè)個數(shù)的紅包在視窗外部(用戶看不到),然后修改每個紅包的樣式來實現(xiàn)動畫(當(dāng)然用css keyframes幀動畫也可以,我這里使用的是js修改屬性)
話不多說直接上代碼吧,代碼內(nèi)有注釋
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({ /** * 頁面的初始數(shù)據(jù) */ data: { windowWidth:"",//窗口寬度 windowHeigh:"",//窗口高度 packetList:[{}],//紅包隊列 packetNum:200,//總共紅包的數(shù)量 showInter:''// 循環(huán)動畫定時器 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { var that = this; // 獲取手機(jī)屏幕寬高 wx.getSystemInfo({ success: function (res) { that.setData({ windowWidth: res.windowWidth, windowHeigh: res.windowHeight, top: res.windowHeight-100 //設(shè)置紅包初始位置 }) } }) //建立臨時紅包列表 var packetList=[]; //建立臨時紅包圖片數(shù)組 var srcList = ["../images/packet-one.png", "../images/packet-two.png"]; //生成初始化紅包 for(var i=0;i<that.data.packetNum;i++){ // 生成隨機(jī)位置(水平位置) var left = Math.random() * that.data.windowWidth-20; // 優(yōu)化位置,防止紅包越界現(xiàn)象,保證每個紅包都在屏幕之內(nèi) 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 //生成隨機(jī)掉落時間,保證每個掉落時間保持在3秒到5.5秒之間 } // 將單個紅包裝入臨時紅包列表 packetList.push(packet); // 將生成的臨時紅包列表更新至頁面數(shù)據(jù),頁面內(nèi)進(jìn)行渲染 that.setData({ packetList: packetList }) } // 初始化動畫執(zhí)行當(dāng)前索引 var tempIndex=0; // 開始定時器,每隔1秒掉落一次紅包 that.data.showInter=setInterval(function(){ // 生成當(dāng)前掉落紅包的個數(shù),1-3個 var showNum = Math.ceil(Math.random() * 3); // 防止數(shù)組越界 if (tempIndex * showNum>=that.data.packetNum){ // 如果所有預(yù)生成的紅包已經(jīng)掉落完,清除定時器 clearInterval(that.data.showInter); }else{ switch (showNum){ case 1: //設(shè)置臨時紅包列表當(dāng)前索引下的top值,此處top值為動畫運(yùn)動的最終top值 packetList[tempIndex].top = that.data.windowHeigh; // 當(dāng)前次掉落幾個紅包,索引值就加幾 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(); } // 更新紅包列表數(shù)據(jù) that.setData({ packetList: packetList }) } },1000) } })
好了紅包雨就這樣實現(xiàn)了,其實還是蠻有意思的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能示例
這篇文章主要介紹了JavaScript實現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能,涉及javascript日期與時間相關(guān)操作及運(yùn)算操作技巧,需要的朋友可以參考下2017-02-02PHPMyAdmin導(dǎo)入時提示文件大小超出PHP限制的解決方法
這篇文章主要介紹了PHPMyAdmin導(dǎo)入時提示文件大小超出PHP限制的解決方法,造成這個問題的原因是PHP上傳大小限制為2MB,修改PHP.ini配置即可解決這問題,需要的朋友可以參考下2015-03-03