vue实现烟花

Vue 实现烟花效果

在 Vue 中实现烟花效果可以通过结合 CSS 动画和 JavaScript 动态生成烟花元素。以下是具体实现方法：

动态生成烟花元素

通过 Vue 的 v-for 动态生成烟花粒子，每个粒子代表烟花的一个火花。在模板中添加一个容器用于放置烟花：

<template>
  <div class="fireworks-container" @click="createFirework">
    <div 
      v-for="(particle, index) in particles" 
      :key="index"
      class="particle"
      :style="{
        left: particle.x + 'px',
        top: particle.y + 'px',
        backgroundColor: particle.color,
        transform: `scale(${particle.size})`
      }"
    ></div>
  </div>
</template>

烟花粒子数据与动画

在 Vue 的 data 中定义粒子数组，并通过方法生成随机粒子属性：

data() {
  return {
    particles: []
  }
},
methods: {
  createFirework(event) {
    const colors = ['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff00ff'];
    const particleCount = 100;

    for (let i = 0; i < particleCount; i++) {
      const angle = Math.random() * Math.PI * 2;
      const speed = Math.random() * 5 + 2;
      const size = Math.random() * 0.5 + 0.5;

      this.particles.push({
        x: event.clientX,
        y: event.clientY,
        color: colors[Math.floor(Math.random() * colors.length)],
        size,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed
      });
    }

    this.animateParticles();
  },
  animateParticles() {
    const animation = setInterval(() => {
      this.particles.forEach(particle => {
        particle.x += particle.vx;
        particle.y += particle.vy;
        particle.vy += 0.1; // 重力效果
        particle.size *= 0.99; // 粒子逐渐缩小
      });

      this.particles = this.particles.filter(p => p.size > 0.1);

      if (this.particles.length === 0) {
        clearInterval(animation);
      }
    }, 30);
  }
}

CSS 样式

为烟花粒子添加基础样式和动画效果：

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

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.1s ease-out;
}

优化与扩展

• 添加 requestAnimationFrame 替代 setInterval 以获得更流畅的动画性能。
• 引入随机延迟和不同的粒子形状（如线条或星星）以增强视觉效果。
• 通过 Vue 的 transition-group 实现粒子消失的渐隐效果。

完整示例可通过点击页面触发烟花爆炸，粒子会受重力影响下坠并逐渐消失。可根据需要调整粒子数量、颜色和运动参数以实现不同风格的烟花效果。