微信小程序实现红包雨功能

本文分享微信小程序实现红包雨的具体代码，供大家参考。具体内容如下

今天有个Younger来问我怎么用微信小程序实现红包雨效果。如果是用web实现的很好，但是小程序没那么容易，而且我已经一年没碰小程序整合自己了，所以决定试一试。

首先，明确“红包雨”的需求：

随机位置掉落随机红包样式同时掉落的数量是随机的，但是每个红包的掉落速度是随机的，但是不能太快也不能太慢。先看看我做的效果。

首先明确小程序实现红包雨和网页实现红包雨的区别是什么：

小程序不能直接操作dom，但是网页可以操作小程序循环渲染。动画无法在wx:for中执行。执行无条件小程序时，不能直接修改网页中的动画。网页不能通过数据绑定直接修改，可以直接取dom元素进行修改。所以，问题是如何生成红包雨。小程序不能直接操作dom，这意味着元素不能添加到dom中。我这里的解决方案是老师在窗口外创建预设数量的红包(用户看不到)，然后修改每个红包的样式实现动画(当然也可以使用css关键帧帧动画，这里我用js修改属性)

话不多说，直接去看代码，代码里有注释

wxml:

view wx : for=' { { packet list } } ' wx : for-index=' index ' wx : for-item=' items ' image class=' red-packet ' src=' http : { { items . src } } ' style=' position : fixed；top: { { items.top } } pxleft: { { items.left } } px-web kit-transit : { { items . speed } } ms linear 0 ms；transit : { { items . speed } } ms linear 0ms '/image/viewxss 3360。红包{ width: 20px高度： 25px；z-index : 100；transition-property : transform，top转换-原始：50% 50% 0；-web kit-transition-property : transform，top-web kit-transform-origin :50% 50% 0；}js:

page({/** * page的初始数据*/data: {windowwidth: ' '，//window width windowheigh3360 ' '，//window heigh packet list 3360[{ }]，//红包队列packetNum:200，//红包总数showInter:''//循环动画定时器}，/* * *生命周期函数-监控页面加载*/onload :函数(选项){ var=this；//获取wx . getsystem info({ success : function(RES){ that . setdata({ window width 3360 RES . window width，window heigh : RES . window height，Top: res.windowHeight-100 //设置红包的初始位置})} })//创建临时红包列表var packet list=[]；//创建临时红包图片数组varsrclist=['./images/packet-one.png '，'./images/packet-two . png ']；//为(var i=0)生成初始化红包；ithat . data . packet tnum；I ){ //生成随机位置(水平位置)varleft=math . random()* that . data . window width-20；//优化位置，防止红包越界，确保每个红包在(left 0){ left=20；} else if(left that . data . window width){ left-=20；}//创建一个临时的单个红包varpacket={ src 3360 rclist[math . ceil(math . random()* 2)-1]，top:-30，left:left，Speed : math。random()* 2500 3000//生成随机下降时间，并确保每次下降时间保持在3秒到5.5秒之间}//将单个红包加载到临时红包列表packetList.push(packet)中；//将生成的临时红包列表更新为页面数据，并渲染该. setdata({ packet list : packet list })}//初始化动画执行当前索引var tempIndex=0；//启动定时器，每1秒丢一个红包。那个。data.showinter=setinterval(函数(){//生成目前掉的红包数，1-3 varshow num=math . ceil(math . random()* 3)；//如果(temp index * show num=that . data . packet num){//如果所有预先生成的红包都已丢弃，则清除timer clear interval(that . data . show inter)；} else { switch(show num){ case 1://设置临时红包列表当前索引下的顶值，其中顶值为动画运动包列表[tempindex]的最终顶值。top=that . data . window height；//如果当前时间掉了几个红包，在索引值上加几个tempIndex=1；打破；案例2: packetList[tempIndex]。top=that . data . windowheigh；packetList[tempIndex 1]。top=that . data . windowheigh；tempIndex=2；打破；案例3: packetList[tempIndex]。top=that . data . windowheigh；packetList[tempIndex 1]。top=that . data . windowheigh；packetList[tempIndex 2]。top=that . data . windowheigh；tempIndex=3；打破；default : console . log()；}//更新红包列表数据即。setdata({ packet list : packet list })} }，1000)})好了，红包雨就这样实现了，其实挺有意思的。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。