css3实现微信小程序红包雨

css3实现微信小程序红包雨

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

<view>//红包开始前5秒倒计时<view wx:if="{{showBefore}}" class="beforeRain"><view bindtap="clearTimer" class="bfText">一大波红包即将来袭</view><view class="timeing">{{beforeTime}}</view></view>//红包开始下落<view wx:if="{{showBegin}}" class="beginRain"><view wx:if="{{rainTime>0}}" class="beginText">{{pocketNum}}</view><view wx:if="{{rainTime>0}}" class="ge">个</view><view wx:if="{{rainTime>0}}" class="rainTime">00:{{rainTime>9?'':'0'}}{{rainTime}}</view><view class="pocketList"><block wx:for="{{imagesList}}" wx:key="index"><image wx:if="{{index==idx?false:true}}" bindtap="getPocket" data-idx='{{index}}' class="pocket" style="position:fixed;transform:translateY({{magtop}}px) rotate({{anRota}}deg);left:{{item.magLeft}}rpx;transition:{{item.downTime}}ms linear {{item.delatTime}}ms;" src="{{item.ulr}}" />//这里是设置点击红包让红包消失，同时通过transition属性控制红包下落以及旋转角度</block></view>></view>//抢完红包后展示已抢红包以及拆红包<view wx:if="{{showAfter}}" class="afterCss"><view class="bgAllPoct" style="background-image: url({{'.png?'+suijiNum}});"><view class="allPoct"><view class="allbox"><block wx:for="{{allPocket}}" wx:for-index="index"><view bindtap="{{item.downId==1?'':'allOpenPoct'}}" data-Num="1" data-ind="{{index}}" class="{{item.downId==1?'openPock':'poct'}}" style="transform:rotateY({{item.downId}}turn);background-image:url({{item.imgUrl}});"><block wx:if="{{item.imgUrl!='.png'}}"><view class="money">¥{{}}</view><view class="mongName">{{pe==0?'次卡':pe==1?'折扣卡':pe==2?'充值卡':pe==10?'满减券':pe==11?'代金券':pe==12?'手气券':''}}</view></block></view></block></view><view class="text">活动解释权归本店所有</view></view><image class="allOpen" bindtap="allOpenPoct" data-Num="{{pocketNum}}" src="{{'.png?'+suijiNum}}"></image><image bindtap="closeImg" class="closeAll" src="./images/close.png"></image></view></view><block wx:if="{{showCont}}"><view class="PoctCont"><image bindtap="closeImgSm" class="closeSm" src="./images/closed.png"></image><view class="contTextBox"><view class="contText" wx:for="{{pocketList}}" wx:key="index"><view class="contName">{{item.name}}</view><view class="contMoney"><span style="font-weight: bold;">{{item.mvalue}}</span>元</view></view></view></view></block>
</view>

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:'.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,})}({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<e.data.length;i++){e.data[i].mvalue = e.data[i].mvalue/100this.data.pocketList.push(e.data[i])}this.setData({showCont:true,showAfter:false,pocketList:this.data.pocketList})console.log(this.data.pocketList)}else{this.data.openNum = this.data.openNum+PoctCont = e.data[0]PoctCont.mvalue = PoctCont.mvalue/100this.data.pocketList.push(PoctCont)this.setData({pocketList:this.data.pocketList})console.log(this.data.pocketList)for(var i=0;i<this.data.allPocket.length;i++){if(this.data.ind==i){this.data.allPocket[i].type = pethis.data.allPocket[i].money = PoctCont.mvalue}}}},})//处理数据for(var i=0;i<this.data.allPocket.length;i++){if(i==this.data.ind){this.data.allPocket[i].downId = 1}}this.setData({allPocket:this.data.allPocket})setTimeout(()=>{for(var n=0;n<this.data.allPocket.length;n++){if(n==this.data.ind){this.data.allPocket[n].imgUrl = '.png?'+this.data.suijiNum}}this.setData({allPocket:this.data.allPocket})},2000)if(this.data.openNum==this.data.allPocket.length){setTimeout(()=>{this.setData({showCont:true,showAfter:false})},3000)}},closeImgSm(){this.setData({showCont:false})},//点击抢红包getPocket(e){if(this.data.pocketNum<3){var jsn ={}jsn.downId = 0jsn.imgUrl = this.data.pocketImgthis.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 = thisthat.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<that.data.imagesList.length;i++){//   var jsObj = that.data.imagesList[i]//   that.data.imagesList[i].magtop = 1000// }that.setData({magtop:1200})console.log(that.data.magtop,"======")// that.setData({//   imagesList:that.data.imagesList// })that.data.beginLoan = setInterval(()=>{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(.png);/*这里一定是网络图片，本地图片是显示不出来的*/background-size: 100% 100%;background-repeat: no-repeat
}
.beginText{width: 88rpx;height: 115rpx;text-align: center;background-image: url(.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('.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就是安卓机上面显示会卡顿，有没有大神有好的建议，欢迎指导