vue红包雨实现

实现思路

红包雨是一种常见的互动效果，通常在节日或促销活动中使用。Vue 结合 Canvas 或 CSS3 动画可以实现这一效果。以下是两种常见的实现方式。

基于 Canvas 的实现

Canvas 适合处理大量动态元素，性能较好。

1. 创建 Canvas 画布
在 Vue 组件中嵌入 Canvas 元素，并设置合适的宽高。

<template>
  <div class="red-packet-rain">
    <canvas ref="canvas" width="800" height="600"></canvas>
  </div>
</template>

2. 初始化 Canvas 上下文
在 mounted 钩子中获取 Canvas 上下文，并初始化红包雨的数据。

export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    this.initRedPackets(ctx, canvas.width, canvas.height);
  },
  methods: {
    initRedPackets(ctx, width, height) {
      this.redPackets = Array.from({ length: 50 }, () => ({
        x: Math.random() * width,
        y: -20,
        speed: 2 + Math.random() * 3,
        size: 20 + Math.random() * 10,
      }));
      this.animate(ctx, width, height);
    },
  },
};

3. 动画循环
使用 requestAnimationFrame 实现红包下落动画。

animate(ctx, width, height) {
  ctx.clearRect(0, 0, width, height);
  this.redPackets.forEach(packet => {
    packet.y += packet.speed;
    if (packet.y > height) {
      packet.y = -20;
      packet.x = Math.random() * width;
    }
    ctx.fillStyle = 'red';
    ctx.fillRect(packet.x, packet.y, packet.size, packet.size);
  });
  requestAnimationFrame(() => this.animate(ctx, width, height));
},

基于 CSS3 动画的实现

CSS3 动画实现简单，适合少量元素。

1. 动态生成红包元素
在模板中使用 v-for 动态生成红包元素。

<template>
  <div class="red-packet-rain">
    <div
      v-for="(packet, index) in packets"
      :key="index"
      class="red-packet"
      :style="{
        left: `${packet.x}px`,
        animation: `fall ${packet.duration}s linear infinite`,
      }"
    ></div>
  </div>
</template>

2. 初始化红包数据
在 data 中定义红包的初始位置和动画时间。

export default {
  data() {
    return {
      packets: Array.from({ length: 20 }, () => ({
        x: Math.random() * window.innerWidth,
        duration: 3 + Math.random() * 4,
      })),
    };
  },
};

3. 定义 CSS 动画
在样式表中定义下落动画和红包样式。

.red-packet-rain {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.red-packet {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}

交互优化

1. 点击红包事件
为红包添加点击事件，点击后移除或触发奖励逻辑。

<div
  v-for="(packet, index) in packets"
  :key="index"
  class="red-packet"
  @click="handleClick(index)"
></div>

methods: {
  handleClick(index) {
    this.packets.splice(index, 1);
    alert('恭喜获得红包！');
  },
},

2. 性能优化

• Canvas 实现时，避免频繁创建对象，复用红包数据。
• CSS3 实现时，控制红包数量，避免过多 DOM 元素影响性能。

总结

• Canvas 实现：适合复杂场景，性能较好，但代码稍复杂。
• CSS3 实现：简单快捷，适合少量元素，性能受 DOM 数量限制。

根据实际需求选择合适的方案，并优化交互体验。