当前位置：首页 > VUE

vue实现烟花效果

2026-03-09 16:40:57VUE

Vue实现烟花效果的方法

使用Canvas绘制烟花

在Vue中可以通过Canvas实现烟花效果。创建一个Canvas元素，利用JavaScript绘制烟花爆炸和粒子运动效果。

<template>
  <div>
    <canvas ref="canvas" width="800" height="600"></canvas>
  </div>
</template>

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

      // 烟花粒子数组
      let particles = [];

      // 绘制函数
      function draw() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        particles.forEach((p, i) => {
          p.x += p.vx;
          p.y += p.vy;
          p.alpha -= 0.01;

          ctx.fillStyle = `rgba(${p.color}, ${p.alpha})`;
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
          ctx.fill();

          if(p.alpha <= 0) {
            particles.splice(i, 1);
          }
        });

        requestAnimationFrame(draw);
      }

      // 创建烟花
      function createFirework(x, y) {
        const particleCount = 100;
        const color = `${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}`;

        for(let i = 0; i < particleCount; i++) {
          particles.push({
            x,
            y,
            radius: Math.random() * 3 + 1,
            color,
            alpha: 1,
            vx: Math.cos(Math.PI * 2 * i / particleCount) * Math.random() * 6,
            vy: Math.sin(Math.PI * 2 * i / particleCount) * Math.random() * 6
          });
        }
      }

      // 点击触发烟花
      canvas.addEventListener('click', (e) => {
        createFirework(e.offsetX, e.offsetY);
      });

      draw();
    }
  }
}
</script>

使用CSS动画实现简单烟花

对于不需要复杂效果的场景，可以使用纯CSS实现简单的烟花动画。

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

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

      for(let i = 0; i < 12; i++) {
        const angle = (Math.PI * 2 / 12) * i;
        const distance = Math.random() * 100 + 50;

        this.fireworks.push({
          style: {
            left: `${e.clientX}px`,
            top: `${e.clientY}px`,
            backgroundColor: color,
            transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`
          }
        });

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

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

.firework {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transition: all 1s ease-out;
}
</style>

使用第三方库

对于更复杂的效果，可以考虑使用第三方库如particles.js或vue-particles。

vue实现烟花效果

安装vue-particles：

npm install vue-particles

使用示例：

vue实现烟花效果

<template>
  <div>
    <vue-particles
      color="#ffffff"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#ffffff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    />
  </div>
</template>

<script>
import VueParticles from 'vue-particles'
export default {
  components: {
    VueParticles
  }
}
</script>