uni-app微信小程序之紅包雨活動完整源碼

更新時間：2024年01月30日 11:47:47 作者：范特西是只貓

最近公司需求做一個微信紅包雨功能,這里給大家總結下實現(xiàn)的方法,這篇文章主要給大家介紹了關于uni-app微信小程序之紅包雨活動的相關資料,需要的朋友可以參考下

1. 頁面效果

GIF錄屏有點卡，實際比較絲滑

每0.5s掉落一個紅包

控制4s后自動移除紅包

點擊紅包消除紅包（或者自行+1，或者彈窗需求）

2. 頁面樣式代碼

<!-- 紅包雨活動 -->
<template>
	<scroll-view scroll-y="true">
		<view class="red-envelope-rain">
			<view v-for="(redEnvelope, index) in redEnvelopes" :key="index" class="red-envelope"
				:style="{ top: redEnvelope.top + 'px', left: redEnvelope.left + 'px' }"
				@click="handleRedEnvelopeClick(index)"></view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				redEnvelopes: [],
				redEnvelopeInterval: null,
			}
		},
		onLoad(options) {
			// 每秒創(chuàng)建一個紅包
			setInterval(this.initializeRedEnvelopes, 500); 
			// 更新紅包位置，約 60 幀
			setInterval(this.moveRedEnvelopes, 1000 / 60); 
		},
		beforeDestroy() {
			this.stopRedEnvelopeRain();
		},
		methods: {
			initializeRedEnvelopes() {
				const numRedEnvelopes = 20; // 紅包數(shù)量
				// for (let i = 0; i < numRedEnvelopes; i++) {
				const redEnvelope = {
					id: Date.now(),
					top: 0, // 隨機縱坐標
					left: Math.random() * (uni.getSystemInfoSync().windowWidth - 50), // 隨機橫坐標
					speed: Math.random() * 6 + 1, // 隨機速度
				};
				this.redEnvelopes.push(redEnvelope);

				setTimeout(() => {
					this.redEnvelopes = this.redEnvelopes.filter(p => p.id !== redEnvelope.id);
				}, 4000); // 4秒后移除紅包
			},
			startRedEnvelopeRain() {
				this.redEnvelopeInterval = setInterval(() => {
					this.moveRedEnvelopes();
				}, 1000 / 60); // 每秒60幀
			},
			stopRedEnvelopeRain() {
				clearInterval(this.redEnvelopeInterval);
			},
			moveRedEnvelopes() {
				this.redEnvelopes.forEach((redEnvelope, index) => {
					console.log(redEnvelope, "redEnvelopes")
					redEnvelope.top += redEnvelope.speed;
					if (redEnvelope.top > uni.getSystemInfoSync().windowHeight) {
						this.redEnvelopes = this.redEnvelopes.filter(p => p.id !== redEnvelope.id);
					}
				});
			},
			// 處理紅包點擊事件，可以增加分數(shù)或顯示提示等操作
			handleRedEnvelopeClick(index) {
				// 例如：this.score += 1;
				// 或者：this.showTip = true;
				// 可以根據(jù)實際需求自行添加邏輯
				this.redEnvelopes.splice(index, 1); // 點擊后移除紅包
			},
		}
	}
</script>

<style lang="scss">
	.red-envelope-rain {
		position: relative;
		overflow: hidden;
		width: 100vw;
		height: 100vh;
	}

	.red-envelope {
		position: absolute;
		background-image: url('https://i-1.lanrentuku.com/2020/11/4/a9b4bcdb-75f3-429d-9c21-d83d945b088e.png?imageView2/2/w/500');
		background-size: 100rpx 100rpx;
		background-repeat: no-repeat;
		width: 100rpx;
		height: 100rpx;
	}
</style>

附：uniapp仿微信紅包打開動畫效果

<template>
	<view>
		<view v-if="packerState != 3" class="packer-box flex-column">
			<view class="packer-bg anim-ease-in" :class="{ 'anim-fade-out': packerState == 2 }"></view>
			<view class="packer-bottom-box anim-ease-in" :class="{ 'anim-out-bottom': packerState == 2 }">
				<view class="arc-bottom-edge"></view>
				<view class="packer-bottom-bg"></view>
			</view>
			<view class="packer-top-box anim-ease-in" :class="{ 'anim-out-top': packerState == 2 }">
				<view class="flex-row sender-info">
					<image class="sender-avatar"></image>
					<view>{{'XXX'}}發(fā)出的紅包</view>
				</view>
				<view class="packer-greeting double-text">{{'恭喜發(fā)財，大吉大利'}}</view>
				<view class="arc-edge"></view>
				<view v-if="packerState == 1" class="anim-rotate packer-btn-pos">
					<view class="packer-btn" style="transform: translateZ(-4px);">開</view>
					<view class="packer-btn-middle" v-for="(item, index) in 7" :key="index" :style="{transform: `translateZ(${index - 3}px)`}"></view>
					<view class="packer-btn packer-btn-front">開</view>
				</view>
				<view v-else class="packer-btn packer-btn-pos" @click="openPacker">開</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				packerState: 0
			}
		},
		methods: {
			openPacker() {
				// 加載數(shù)據(jù)，觸發(fā)硬幣旋轉動畫
				this.packerState = 1;
				this.request(() => {
					// 調(diào)用搶紅包接口成功，觸發(fā)開紅包動畫
					this.packerState = 2;
					// 開紅包動畫結束后，移除相關節(jié)點，否則會阻擋其它下層節(jié)點
					setTimeout(() => {
						this.packerState = 3;
					}, 500);
				})
				
			},
			request(success) {
				setTimeout(() => {
					success()
				}, 3000);
			}
		}
	}
</script>
 
<style>
	.flex-row {
		display: flex;
		flex-direction: row;
		position: relative;
	}
	.flex-column {
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.packer-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		color: rgb(235, 205, 153);
		padding: 60rpx;
	}
 
	.packer-bg {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}
 
	.packer-top-box {
		width: 600rpx;
		background-color: rgb(244, 94, 77);
		text-align: center;
		margin: auto;
		transform: translateY(-160rpx);
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		position: relative;
	}
 
	.sender-info {
		margin-top: 200rpx;
		justify-content: center;
		line-height: 60rpx;
		font-size: 36rpx;
	}
 
	.sender-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-right: 10rpx;
	}
 
	.packer-greeting {
		font-size: 48rpx;
		line-height: 60rpx;
		height: 120rpx;
		margin: 40rpx 30rpx 200rpx;
	}
 
	.arc-edge {
		position: relative;
	}
 
	.arc-edge::after {
		width: 100%;
		height: 200rpx;
		position: absolute;
		left: 0;
		top: -100rpx;
		z-index: 9;
		content: '';
		border-radius: 50%;
		background-color: rgb(244, 94, 77);
		box-shadow: 0 6rpx 6rpx 0 rgba(0, 0, 0, 0.1);
	}
 
	.packer-bottom-box {
		transform: translate(-50%, 0);
		width: 600rpx;
		height: 360rpx;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		overflow: hidden;
		position: absolute;
		bottom: calc(50% - 440rpx);
		left: 50%;
	}
 
	.anim-ease-in {
		animation-duration: 0.5s;
		animation-timing-function: ease-in;
		animation-fill-mode: forwards;
	}
	
	.anim-out-top {
		animation-name: slideOutTop;
	}
	
	.anim-out-bottom {
		animation-name: slideOutBottom;
	}
	
	.anim-fade-out {
		animation-name: fadeOut;
	}
 
	@keyframes fadeOut {
		from {
			opacity: 1;
		}
 
		to {
			opacity: 0;
		}
	}
 
	@keyframes slideOutTop {
		from {
			transform: translateY(-160rpx);
		}
 
		to {
			transform: translateY(-200%);
		}
	}
 
	@keyframes slideOutBottom {
		from {
			transform: translate(-50%, 0);
		}
 
		to {
			transform: translate(-50%, 200%);
		}
	}
 
	.arc-bottom-edge {
		position: relative;
	}
 
	.arc-bottom-edge::after {
		width: 120%;
		height: 200rpx;
		position: absolute;
		left: -10%;
		top: -100rpx;
		z-index: 8;
		content: '';
		border-radius: 50%;
		box-shadow: 0 60rpx 0 0 rgb(242, 85, 66);
	}
 
	.packer-bottom-bg {
		background-color: rgb(242, 85, 66);
		height: 280rpx;
		margin-top: 100rpx;
	}
 
	.packer-btn {
		border-radius: 50%;
		width: 200rpx;
		height: 200rpx;
		line-height: 200rpx;
		font-size: 80rpx;
		text-align: center;
		color: #333;
		background-color: rgb(235, 205, 153);
		box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1);
	}
	.packer-btn-pos {
		transform: translateX(-50%);
		position: absolute;
		left: 50%;
		z-index: 10;
		bottom: -200rpx;
	}
	.packer-btn-front {
		position: absolute;
		top: 0;
		transform: translateZ(4px);
	}
	.packer-btn-middle {
		position: absolute;
		top: 0;
		border-radius: 50%;
		width: 200rpx;
		height: 200rpx;
		background-color: rgb(235, 180, 120);
	}
	.anim-rotate {
		margin-left: -100rpx;
		transform-style: preserve-3d;
		animation: rotate 1s linear infinite;
	}
	@keyframes rotate{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
</style>

總結

到此這篇關于uni-app微信小程序之紅包雨活動的文章就介紹到這了,更多相關uni-app小程序紅包雨活動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解JavaScript對象類型
這篇文章主要為大家詳細介紹了JavaScript對象類型，分析了JavaScript六種數(shù)據(jù)類型，感興趣的小伙伴們可以參考一下
2016-06-06
js遍歷詳解(forEach, map, for, for...in, for...of)
在本篇文章里小編給大家整理的是關于js中的各種遍歷(forEach, map, for, for...in, for...of)相關知識點用法總結，需要的朋友們參考下。
2019-08-08
Bootstrap 網(wǎng)格系統(tǒng)布局詳解
在平面設計中，網(wǎng)格是一種由一系列用于組織內(nèi)容的相交的直線（垂直的、水平的）組成的結構（通常是二維的）。這篇文章主要介紹了Bootstrap 網(wǎng)格系統(tǒng)布局,需要的朋友可以參考下
2017-03-03
JavaScript通過RegExp實現(xiàn)客戶端驗證處理程序
通過RegExp實現(xiàn)客戶端驗：讓文本框只允許輸入數(shù)字、文本框只允許輸入中文、郵箱輸入格式的判斷等等，具體實現(xiàn)如下，感興趣的朋友可以參考下哈
2013-05-05
JavaScript實現(xiàn)獲取本機IP地址
這篇文章主要介紹了JavaScript實現(xiàn)獲取本機IP地址方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
webpack之基礎打包優(yōu)化的實現(xiàn)
本文主要介紹了webpack之基礎打包優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下<BR>
2022-02-02
小程序外賣訂單界面的示例代碼
這篇文章主要介紹了小程序外賣訂單界面的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
在window.setTimeout方法中傳送對象
setTimeout方法是js中的延時方法，很多js的bug，只需要使用該方法延時一下，就會自動解決了，簡直就是萬能藥方，也是我比較喜歡使用的最后手段。
2006-12-12
firefox事件處理之自動查找event的函數(shù)（用于onclick=foo()）
在ie中，事件對象是作為一個全局變量來保存和維護的。所有的瀏覽器事件,不管是用戶觸發(fā)的，還是其他事件，都會更新window.event 對象。
2010-08-08
javascript封裝 Cookie 應用接口
本文通過幾個簡單的示例向大家展示了javascript封裝cookie的注意事項及操作方法，非常的簡單實用，最后附上一則具體實例，有需要的小火把可以參考下。
2015-08-08