当前位置：首页 > VUE

vue实现烟花

2026-02-10 15:55:47VUE

Vue实现烟花效果的方法

在Vue中实现烟花效果可以通过Canvas绘制或CSS动画两种方式。以下是具体实现方法：

使用Canvas绘制烟花

在Vue组件中创建Canvas元素并绘制烟花动画：

<template>
  <div class="fireworks-container">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initFireworks();
  },
  methods: {
    initFireworks() {
      const canvas = this.$refs.canvas;
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      const ctx = canvas.getContext('2d');

      class Particle {
        constructor(x, y, color) {
          this.x = x;
          this.y = y;
          this.color = color;
          this.velocity = {
            x: (Math.random() - 0.5) * 8,
            y: (Math.random() - 0.5) * 8
          };
          this.alpha = 1;
          this.decay = Math.random() * 0.015 + 0.01;
        }

        draw() {
          ctx.globalAlpha = this.alpha;
          ctx.fillStyle = this.color;
          ctx.beginPath();
          ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
          ctx.fill();
        }

        update() {
          this.velocity.y += 0.05;
          this.x += this.velocity.x;
          this.y += this.velocity.y;
          this.alpha -= this.decay;
          this.draw();
          return this.alpha > 0;
        }
      }

      let particles = [];

      function createFirework(x, y) {
        const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
        const particleCount = 150;

        for (let i = 0; i < particleCount; i++) {
          particles.push(new Particle(x, y, color));
        }
      }

      function animate() {
        requestAnimationFrame(animate);
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        particles = particles.filter(particle => particle.update());
      }

      animate();

      window.addEventListener('click', (e) => {
        createFirework(e.clientX, e.clientY);
      });

      // 自动发射烟花
      setInterval(() => {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height / 2;
        createFirework(x, y);
      }, 1000);
    }
  }
}
</script>

<style>
.fireworks-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
</style>

使用CSS动画实现简单烟花

对于简单的烟花效果，可以使用纯CSS实现：

<template>
  <div class="firework" v-for="(firework, index) in fireworks" :key="index" 
       :style="firework.style"></div>
</template>

<script>
export default {
  data() {
    return {
      fireworks: []
    }
  },
  methods: {
    launchFirework() {
      const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
      const color = colors[Math.floor(Math.random() * colors.length)];

      this.fireworks.push({
        style: {
          left: `${Math.random() * 100}%`,
          top: `${Math.random() * 100}%`,
          '--color': color
        }
      });

      setTimeout(() => {
        this.fireworks.shift();
      }, 1000);
    }
  },
  mounted() {
    setInterval(this.launchFirework, 500);
  }
}
</script>

<style>
.firework {
  position: fixed;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color);
  animation: explode 1s ease-out forwards;
  transform: translate(-50%, -50%);
}

@keyframes explode {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(20);
    opacity: 0;
  }
}
</style>

使用第三方库

对于更复杂的烟花效果，可以使用第三方库如canvas-confetti：

<template>
  <button @click="fireConfetti">发射烟花</button>
</template>

<script>
import confetti from 'canvas-confetti';

export default {
  methods: {
    fireConfetti() {
      confetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 }
      });
    }
  }
}
</script>