uniapp 红包从天上掉下来
时间: 2025-01-27 15:18:49 浏览: 44
### uniapp 实现红包雨效果
为了创建一个全屏红包雨效果,可以利用 `uni-app` 的动画能力和 Canvas 组件来实现这一视觉特效。下面是一个详细的实现方案以及相应的代码片段。
#### 创建红包雨组件
首先,在项目中新建一个名为 `RainOfRedPackets.vue` 的组件文件:
```html
<template>
<view class="rain-container">
<!-- 红包容器 -->
<canvas type="2d" id="red-packet-canvas"></canvas>
<!-- 可选:用于显示得分或其他信息的区域 -->
<text>{{ score }}</text>
</view>
</template>
<script>
export default {
data() {
return {
canvasContext: null,
redPackets: [],
score: 0, // 记录点击红包获得分数
packetImageSrc: '/static/images/red_packet.png', // 自定义红包图片路径
intervalId: null,
};
},
onLoad() {
this.initCanvas();
this.startDroppingPackets();
},
methods: {
initCanvas() {
const query = uni.createSelectorQuery().in(this);
query.select('#red-packet-canvas').fields({
node: true,
size: true
}).exec((res) => {
let canvas = res[0].node;
this.canvasContext = canvas.getContext('2d');
// 加载红包图像资源
var img = new Image();
img.src = this.packetImageSrc;
img.onload = () => {
this.redPacketImg = img;
}
});
},
startDroppingPackets() {
clearInterval(this.intervalId); // 清除之前的定时器
this.intervalId = setInterval(() => {
if (Math.random() > 0.8) { // 控制概率生成新的红包
this.addNewRedPacket();
}
requestAnimationFrame(() => this.updateCanvas());
}, 16); // 大约每秒更新60次画面
},
addNewRedPacket() {
const width = Math.floor(Math.random() * 50 + 30); // 随机宽度
const height = width; // 正方形形状保持一致比例
const startX = Math.floor(Math.random() * window.innerWidth - width);
this.redPackets.push({
x: startX,
y: -height,
w: width,
h: height,
speedY: Math.random() * 2 + 1, // 下降速度随机化
});
},
updateCanvas() {
this.clearCanvas();
for (let i = 0; i < this.redPackets.length; ++i) {
const rp = this.redPackets[i];
rp.y += rp.speedY;
if (rp.y >= window.innerHeight || this.checkClick(rp)) {
this.removeRedPacket(i--);
continue;
}
this.drawRedPacket(rp);
}
},
clearCanvas() {
this.canvasContext.clearRect(0, 0, window.innerWidth, window.innerHeight);
},
drawRedPacket(packet) {
this.canvasContext.drawImage(
this.redPacketImg,
packet.x,
packet.y,
packet.w,
packet.h
);
},
removeRedPacket(index) {
this.redPackets.splice(index, 1);
},
checkClick(packet) {
// 检测触摸事件并处理碰撞检测逻辑...
// 如果发生碰撞,则增加分数,并返回true表示移除此红包
return false;
}
}
}
</script>
<style scoped>
.rain-container {
position: relative;
}
/* 设置画布覆盖整个屏幕 */
#red-packet-canvas {
position: absolute;
top: 0;
left: 0;
z-index: 999;
pointer-events: none; /* 不阻止其他交互操作 */
}
</style>
```
上述代码实现了基本的红包雨功能[^1],其中包含了初始化画布、添加新红包、绘制和清除红包等功能。通过调整参数如红包尺寸、出现频率等,可以根据实际需求定制更丰富的体验。
对于点击红包加分并且消失的功能,需要进一步完善 `checkClick()` 方法中的触碰判断机制,并在成功捕获到红包时执行相应动作(比如播放声音)。这部分涉及到具体的业务逻辑设计,可根据应用场景灵活调整。
阅读全文
相关推荐
















