js实现红包雨怎么实现
实现思路
红包雨的核心逻辑包括随机生成红包位置、控制下落动画、点击交互及碰撞检测。通过动态创建DOM元素、CSS动画和事件监听实现。
基本结构
HTML部分只需一个容器用于承载红包元素：
<div id="redpacket-container"></div>CSS基础样式：
#redpacket-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.redpacket {
position: absolute;
width: 60px;
height: 80px;
background-image: url('redpacket.png');
background-size: contain;
cursor: pointer;
z-index: 10;
animation: fall linear;
}动画关键帧
@keyframes fall {
to {
transform: translateY(100vh);
}
}JavaScript实现
初始化参数配置：
const config = {
duration: 3000, // 动画持续时间(ms)
spawnInterval: 200, // 生成间隔(ms)
maxCount: 50 // 最大同时存在数量
};红包生成函数：
function createRedPacket() {
const packet = document.createElement('div');
packet.className = 'redpacket';
packet.style.left = `${Math.random() * 100}vw`;
packet.style.animationDuration = `${config.duration}ms`;
// 点击事件
packet.addEventListener('click', () => {
packet.remove();
showReward();
});
document.getElementById('redpacket-container').appendChild(packet);
// 动画结束后移除
packet.addEventListener('animationend', () => {
packet.remove();
});
}奖励展示函数：
function showReward() {
const rewards = ['1元', '5元', '10元', '谢谢参与'];
alert(rewards[Math.floor(Math.random() * rewards.length)]);
}控制生成频率：
let activeCount = 0;
function startRedPacketRain() {
const timer = setInterval(() => {
if (activeCount < config.maxCount) {
createRedPacket();
activeCount++;
}
}, config.spawnInterval);
// 5秒后停止
setTimeout(() => {
clearInterval(timer);
}, 5000);
}优化建议
- 使用requestAnimationFrame替代CSS动画实现更流畅的效果
- 添加碰撞检测避免红包重叠
- 实现红包旋转效果增强视觉体验
- 使用对象池管理DOM元素提升性能
完整示例可通过监听窗口加载事件启动：
window.addEventListener('load', startRedPacketRain);
