css3实现微信小程序红包雨

最近公司需求做一个微信红包雨功能，网上搜索到的基本都是用的canvas，对于canvas不是很熟练，于是用css自己写了一个，这种方式对于苹果机效果很好，但是在安卓机上会出现卡顿的情况，几番优化，还是会有一点点卡顿，废话不多说，上代码：
wxml：

	//红包开始前5秒倒计时
	
		一大波红包即将来袭
		{{beforeTime}}
	
	//红包开始下落
	
		
			{{pocketNum}}
		
		个
		00:{{rainTime>9?'':'0'}}{{rainTime}}
		
			
				
					//这里是设置点击红包让红包消失，同时通过transition属性控制红包下落以及旋转角度
			
		>
	
	//抢完红包后展示已抢红包以及拆红包
	
		
			
				
					
						
							
								¥{{item.money}}
								{{item.type==0?'次卡':item.type==1?'折扣卡':item.type==2?'充值卡':item.type==10?'满减券':item.type==11?'代金券':item.type==12?'手气券':''}}
							
						
					
				
				活动解释权归本店所有
			
			
			
		
	
	
		
			
			
				
					{{item.name}}
					{{item.mvalue}}元
				
			
		
	

js:

const app = getApp()  
Component({
	properties:{
		bcstId:Number,
		shopId:Number
	},
	options:{
	    multipleSlots: true
	},
data: {
    items: [],
    currentItem: 0,
    beforeTime:5,
    loanTime:'',
    topList:100,
    showBefore:true,
    showBegin:false,
    showAfter:false,
    rainTime:20,
	allPocket:[],
    minRotate:'',
	pocketImg:'https://open.huaximeiyekeji.com/static/img/wx/redpack/w-open.png',
    pocketNum:0,
    DropPocket0:'',
    maxRotate:'',
    beginLoan:'',
    magtop:0,
	numes:'',
    imagesList:[
      {ulr:'./images/redPacket.png',jiaodu:Math.floor(Math.random()*180)-100,downTime:Math.floor(Math.random()*7000)+5000,delatTime:Math.floor(Math.random()*10000),magLeft:(Math.random()*620)+30,tranRota:Math.floor(Math.random()*360),showPoc:true},
      {ulr:'./images/redPacket.png',jiaodu:Math.floor(Math.random()*180)-100,downTime:Math.floor(Math.random()*7000)+5000,delatTime:Math.floor(Math.random()*10000),magLeft:(Math.random()*620)+30,tranRota:Math.floor(Math.random()*360),showPoc:true},
      {ulr:'./images/redPacket.png',jiaodu:Math.floor(Math.random()*180)-100,downTime:Math.floor(Math.random()*7000)+5000,delatTime:Math.floor(Math.random()*10000),magLeft:(Math.random()*620)+30,tranRota:Math.floor(Math.random()*360),showPoc:true},
	  {ulr:'./images/redPacket.png',jiaodu:Math.floor(Math.random()*180)-100,downTime:Math.floor(Math.random()*7000)+5000,delatTime:Math.floor(Math.random()*10000),magLeft:(Math.random()*620)+30,tranRota:Math.floor(Math.random()*360),showPoc:true},
    ],
    idx:'',
	rotateX3D:0,
	ind:'',
	suijiNum:'',
	getPoctCont:'',
	pocketList:[],
	openNum:1,
	showCont:false
  },
  //事件触发，准备下落，注意images数组里面的几个参数，角度以及下落时间，还有延迟下落都是随机的，下落时间和延迟下落时间都是用ms做单位，不然会出现一波一波的情况，感觉不连贯
	ready: function () {
		this.setData({
			suijiNum:Math.floor(Math.random()*7000)+5000
		})
      this.timer()
    },
	
	methods: {
		closeImg(){
			this.setData({
				showAfter:false
			})
		},
		//拆红包
		allOpenPoct(e){
			//请求接口
			this.setData({
				ind:e.currentTarget.dataset.ind,
			})
			//拆一个还是全部拆
			if(e.currentTarget.dataset.num==1){
				this.setData({
					numes:1,
				})
			}else{
				this.setData({
					numes:this.data.pocketNum,
				})
			}
			app.get({
				url: 'bo/cc/open',
				login: true,
				data: {
					wxId:app.state.wxuser.id,
					id: this.data.bcstId,
					shopId:this.data.shopId,
					num:this.data.numes
				},
				success: e => {
					if (e.code !== 0) return;
					if(this.data.numes>1){
						for(var i=0;i{
				for(var n=0;n{
					this.setData({
						showCont:true,
						showAfter:false
					})
				},3000)
			}
			
		},
		closeImgSm(){
			this.setData({
				showCont:false
			})
		},
		//点击抢红包
		getPocket(e){
			if(this.data.pocketNum<3){
				var jsn ={}
				jsn.downId = 0
				jsn.imgUrl = this.data.pocketImg
				this.data.allPocket.push(jsn)
				this.setData({
				  idx:e.currentTarget.dataset.idx,
				  pocketNum:this.data.pocketNum+1,
				})
				
			}else{
				wx.showToast({
					title:"您已经抢过3个红包了",
					icon:"none"
				})
			}
		  },
		  timer() {
		    let that = this
		    that.data.loanTime = setInterval(function() {
		      if(that.data.beforeTime>0){
		        that.setData({
		          beforeTime: that.data.beforeTime-1
		        })
		      }else{
		        that.clearBeforTimer()
		        that.setData({
		          showBefore:false,
		          showBegin:true
		        })
		        that.beginRain()
		      }
		      
		    }, 1000)
		  },
		  beginRain(){
		    let that = this
		    // for(var i=0;i{
		      if(that.data.rainTime>0){
		        that.setData({
		          rainTime:that.data.rainTime-1
		        })
		      }else{
		        that.clearBeginTimer()
		        that.setData({
		          showBegin:false,
		          showAfter:true,
				  allPocket:that.data.allPocket
		        })
		      }
		    },1000)
		  },
		  afterRain(){
			
		  },
		  clearBeforTimer(){
		     clearInterval(this.data.loanTime)
		  },
		  clearBeginTimer(){
		     clearInterval(this.data.beginLoan)
		  }
	}
	
})

css:

/* pages/index/index.wxss */
.beforeRain{
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FCFED9;
}
.bfText{
  margin-top: 30vh;
  font-size: 60rpx;
  text-align: center;
}
.timeing{
  font-size: 200rpx;
  text-align: center;
}
.beginRain{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;

  background-image: url(https://open.huaximeiyekeji.com/static/img/wx/redpack/bg.png);/*这里一定是网络图片，本地图片是显示不出来的*/
  background-size: 100% 100%;
  background-repeat: no-repeat
}
.beginText{
  width: 88rpx;
  height: 115rpx;
  text-align: center;
  background-image: url(https://open.huaximeiyekeji.com/static/img/wx/redpack/redpack.png);/*这里一定是网络图片，本地图片是显示不出来的*/
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 30rpx;
  color: #FCFED9;
  position: fixed;
  right: 20rpx;
  line-height: 70rpx;
  top: 170rpx;
}
.ge{
	font-size: 18rpx;
	font-weight: 200;
	color: #FCFED9;
	right: 28rpx;
	top: 195rpx;
	position: fixed;
	z-index: 1;
}
.rainTime{
	position: fixed;
	right: 20rpx;
	top: 290rpx;
	color: #ffebcd;
	width: 88rpx;
	text-align: center;
	font-size: 30rpx;
}
.pocket{
  height: 100rpx;
  width: 80rpx;
  transition-property:all;/*这里是定义动画的类型，选择all就行了，但是一定要用transform属性，这样页面性能高，如（height，left，margin）这样的属性性能就很低了具体晚上有详细的教程
  transform-origin:50% 50% 0;
}
.pocketList{
  position: fixed;
  top: -250rpx;
}
.allPoct{
	height: 400rpx;
	width: 555rpx;
	position: fixed;
	top: 500rpx;
	left:105rpx;
}
.poct{
	height: 206rpx;
	margin-top: 40rpx;
	width: 162rpx;
	margin-left: 19rpx;
	float: left;
	background-repeat: no-repeat;
	background-size: 100%;
	vertical-align: bottom;
	transition: transform 2s linear;
}
.openPock{
	height: 262rpx;
	width: 162rpx;
	margin-left: 19rpx;
	float: left;
	vertical-align: bottom;
	background-repeat: no-repeat;
	background-size: 100%;
	transition: transform 2s linear;
}
.bgAllPoct{
	width: 708rpx;
	height: 868rpx;
	position: fixed;
	left: 21rpx;
	top: 150rpx;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 2;
}
.afterCss{
	width: 100vw;
	height: 100vh;
	position: fixed;
	background-color: rgba(0,0,0,0.4);
	top: 0;
	left: 0;
	z-index: 1;
}
.allOpen{
	width: 440rpx;
	height: 100rpx;
	position: fixed;
	top: 875rpx;
	left:155rpx ;
}
.closeAll{
	height: 56rpx;
	width: 56rpx;
	position: fixed;
	top: 1050rpx;
	left: 347rpx;
}
.text{
	font-size: 21rpx;
	color: #977144;
	text-align: center;
}
.allbox{
	height: 280rpx;
	width: 100%;
}
.money{
	margin-top: 48rpx;
	text-align: center;
	font-size: 24rpx;
	color: #977144;
}
.mongName{
	text-align: center;
	font-size: 20rpx;
	color: #977144;
}
.PoctCont{
	background-image: url('https://open.huaximeiyekeji.com/static/img/wx/redpack/bg-list.png');
	background-repeat: no-repeat;
	background-size: 100%;
	height: 650rpx;
	width: 420rpx;
	position: fixed;
	top: 350rpx;
	left: 165rpx;
}
.closeSm{
	height: 28rpx;
	width: 28rpx;
	margin-left: 20rpx;
	margin-top: 20rpx;
}
.getPoctCont{
	display: flex;
}
.contTextBox{
	margin-top: 150rpx;
}
.contText{
	padding:20rpx;
	display: flex;
	font-size: 24rpx;
	color: #D4870E;
}
.contName{
	flex: 1;
	text-align: left;
}
.contMoney{
	width: 130rpx;
	text-align: right;
}

以上基本就是这样，纯css实现微信小程序红包雨，bug就是安卓机上面显示会卡顿，有没有大神有好的建议，欢迎指导