组件介绍

红包雨动画流程 : 
01. 倒计时3秒，开始批量展示红包（每次展示数量及红包批次可以在页面上进行修改，详见页面注释）；
02. 用户点击红包领取，累加数量发生变化时触发结果展示动画；
03. 二次开发请多参考页面注释，组件内部可以修改红包下降速度、点击动画等，请按照项目需要自行修改；

组件名称

gal-red-envelope

兼容平台

组件事件

tapme : 红包被点击时触发，并保证只触发一次；

演示代码

<template>
	<view 
	class="red-envelope-body gal-flex gal-columns gal-justify-content-center">
		<!-- 倒计时展示 -->
		<view v-if="countDownStart > 0">
			<view class="timer-count-down gal-color-gray">{{countDownStart}}</view>
			<view 
			class="gal-text gal-text gal-text-center gal-color-gray" 
			style="line-height:50rpx;">红包雨即将开始</view>
		</view>
		<!-- 红包列表 -->
		<gal-red-envelope 
		v-for="(item, idx) in redBagNumber" 
		:key="idx" 
		@tapme="tapme"></gal-red-envelope>
		<!-- 领取数量  -->
		<view 
		v-if="total > 0"
		class="total_show gal-text-center" 
		:class="[totalAnimate ? 'total_show_animate' : '']">领取 : {{total}} G</view>
	</view>
</template>
<script>
export default{
	data() {
		return {
			// 红包数组
			redBagNumber       : [],
			// 红包倒计时时间, 单位秒 
			// 每5秒钟一波红包， 15/5 = 3 代表总计3波
			countDownTimer     : 15,
			countDownTimerReal : 0 ,
			// 倒计时n秒开始
			countDownStart     : 3,
			// 领取总数
			total              : 0,
			totalAnimate       : false
		}
	},
	onLoad:function(){
		this.countDown();
	},
	watch:{
		total : function(){
			this.totalAnimate = true;
			setTimeout(()=>{this.totalAnimate = false;},200);
		}
	},
	methods:{
		// 制作一波红包
		makeRedBags : function () {
			this.redBagNumber = [];
			setTimeout(()=>{
				// 此处数组元素个数决定一次性产生多少个红包
				this.redBagNumber = [1,2,3,4,5,6,7, 8, 9, 10];
			},500);
			// 一轮红包间隔10秒
			this.countDownTimerReal += 6;
			if(this.countDownTimerReal < this.countDownTimer){
				setTimeout(()=>{this.makeRedBags();}, 5000);
			}
			// 此处红包已经结束
			else{
				setTimeout(()=>{
					uni.showModal({
						title:"恭喜您，领取 : " + this.total + 'G'
					});
					// 执行之后的业务逻辑
				}, 5000);
			}
			
		},
		// 倒计时准备开始
		countDown:function(){
			if(this.countDownStart > 0){
				setTimeout(()=>{
					this.countDownStart -= 1;
					this.countDown();
				},1000);
			}else{
				this.makeRedBags();
			}
		},
		// 点击红包
		tapme : function () {
			// 随机金额
			this.total += this.intRand(1, 10);
		},
		// 随机金额
		intRand : function (min,max) {
			return parseInt(Math.random()*(max-min+1)+min,10);
		}
	}
}
</script>
<style scoped>
.red-envelope-body{position:relative; background-color:#F5F6F8; height:100vh; overflow:hidden;}
.timer-count-down{font-size:150rpx; text-align:center;}
.total_show{width:300rpx; line-height:80rpx; color:#FF0036; font-size:36rpx; position:fixed; right:0rpx; top:180rpx; z-index:2;}
.total_show_animate{animation:total_show 200ms ease-in;}
@keyframes total_show{
	from{transform: scale(1,1);}
	to{transform: scale(1.3,1.3);}
}
</style>