当前位置：首页 > VUE

vue实现点击烟花

2026-03-10 07:33:36VUE

Vue 实现点击烟花效果

方法一：使用 CSS 动画和动态元素

在 Vue 模板中添加点击事件监听，动态生成烟花元素并应用 CSS 动画：

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

<script>
export default {
  methods: {
    createFirework(e) {
      const fireworks = document.createElement('div')
      fireworks.className = 'firework'
      fireworks.style.left = `${e.clientX}px`
      fireworks.style.top = `${e.clientY}px`
      document.body.appendChild(fireworks)

      setTimeout(() => {
        fireworks.remove()
      }, 1000)
    }
  }
}
</script>

<style>
.firework {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7);
  animation: explode 1s ease-out forwards;
}

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

方法二：使用 Canvas 实现复杂效果

对于更复杂的烟花效果，可以使用 Canvas 进行绘制：

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

<script>
export default {
  data() {
    return {
      particles: []
    }
  },
  mounted() {
    this.canvas = this.$refs.canvas
    this.ctx = this.canvas.getContext('2d')
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
    window.addEventListener('resize', this.resizeCanvas)
    this.animate()
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = window.innerWidth
      this.canvas.height = window.innerHeight
    },
    launchFirework(e) {
      const particleCount = 100
      for (let i = 0; i < particleCount; i++) {
        this.particles.push({
          x: e.clientX,
          y: e.clientY,
          vx: Math.random() * 10 - 5,
          vy: Math.random() * 10 - 5,
          color: `hsl(${Math.random() * 360}, 100%, 50%)`,
          radius: Math.random() * 3 + 1,
          life: 100
        })
      }
    },
    animate() {
      requestAnimationFrame(this.animate)
      this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

      this.particles.forEach((p, i) => {
        p.x += p.vx
        p.y += p.vy
        p.life--

        this.ctx.beginPath()
        this.ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2)
        this.ctx.fillStyle = p.color
        this.ctx.fill()

        if (p.life <= 0) {
          this.particles.splice(i, 1)
        }
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas)
  }
}
</script>

方法三：使用第三方库

可以集成专门的动画库如 particles.js 或 anime.js：

安装 anime.js：
```
npm install animejs
```

在组件中使用：


<template>
<div @click="playFirework" class="click-area"></div>
</template>

import anime from 'animejs'

export default { methods: { playFirework(e) { const colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'] const particles = 15

  for (let i = 0; i < particles; i++) {
    const particle = document.createElement('span')
    particle.style.position = 'absolute'
    particle.style.left = `${e.clientX}px`
    particle.style.top = `${e.clientY}px`
    particle.style.width = '10px'
    particle.style.height = '10px'
    particle.style.backgroundColor = colors[i % colors.length]
    particle.style.borderRadius = '50%'
    document.body.appendChild(particle)

    anime({
      targets: particle,
      translateX: () => anime.random(-100, 100),
      translateY: () => anime.random(-100, 100),
      scale: [1, 0],
      opacity: [1, 0],
      duration: 1000,
      easing: 'easeOutExpo',
      complete: () => particle.remove()
    })
  }
}

} }

vue实现点击烟花