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