vue实现点击烟花

Vue 实现点击烟花效果

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

准备工作

确保项目中已安装 Vue，并创建一个 Vue 组件用于实现烟花效果。

创建烟花元素

使用动态生成 DOM 元素的方式创建烟花粒子，每个粒子代表烟花的一个火花。

<template>
  <div class="fireworks-container" @click="createFirework">
    <!-- 点击区域 -->
  </div>
</template>

<script>
export default {
  methods: {
    createFirework(event) {
      const particleCount = 50;
      for (let i = 0; i < particleCount; i++) {
        this.createParticle(event.clientX, event.clientY);
      }
    },
    createParticle(x, y) {
      const particle = document.createElement('div');
      particle.className = 'particle';
      document.body.appendChild(particle);

      const size = Math.random() * 5 + 2;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;

      const angle = Math.random() * Math.PI * 2;
      const velocity = Math.random() * 5 + 2;
      const xVelocity = Math.cos(angle) * velocity;
      const yVelocity = Math.sin(angle) * velocity;

      particle.style.left = `${x}px`;
      particle.style.top = `${y}px`;

      let posX = x;
      let posY = y;

      const animation = setInterval(() => {
        posX += xVelocity;
        posY += yVelocity + 0.1; // 添加重力效果
        particle.style.left = `${posX}px`;
        particle.style.top = `${posY}px`;

        particle.style.opacity = parseFloat(particle.style.opacity || 1) - 0.02;

        if (parseFloat(particle.style.opacity) <= 0) {
          clearInterval(animation);
          particle.remove();
        }
      }, 20);
    }
  }
}
</script>

添加样式

为烟花粒子添加样式，使其呈现彩色和发光效果。

.particle {
  position: absolute;
  border-radius: 50%;
  background: hsl(
    calc(var(--rand-hue, 0) + (var(--hue-offset, 0) * 1deg)), 
    100%, 
    50%
  );
  pointer-events: none;
  --rand-hue: calc(Math.random() * 360);
  --hue-offset: calc(Math.random() * 60 - 30);
  box-shadow: 0 0 10px 2px currentColor;
  transform: translate(-50%, -50%);
}

优化性能

为避免内存泄漏，需要在组件销毁时清除所有烟花粒子。

export default {
  data() {
    return {
      particles: []
    }
  },
  methods: {
    createParticle(x, y) {
      const particle = document.createElement('div');
      this.particles.push(particle);
      // ...其余代码
    }
  },
  beforeUnmount() {
    this.particles.forEach(particle => {
      if (particle.parentNode) {
        particle.parentNode.removeChild(particle);
      }
    });
  }
}

使用 Canvas 高性能版本

对于更复杂的烟花效果，可以使用 Canvas 实现。

<template>
  <canvas ref="canvas" @click="createFirework"></canvas>
</template>

<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
    },
    createFirework(e) {
      // Canvas 实现烟花逻辑
    }
  }
}
</script>

添加音效

为增强体验，可以添加烟花爆炸音效。

methods: {
  playSound() {
    const audio = new Audio('firework.mp3');
    audio.volume = 0.3;
    audio.play();
  },
  createFirework() {
    this.playSound();
    // 烟花逻辑
  }
}

以上方法提供了从简单到复杂的 Vue 点击烟花实现方案，可根据项目需求选择适合的方式。