vue实现点击爆炸
实现点击爆炸效果
使用Vue实现点击爆炸效果可以通过结合CSS动画和JavaScript事件监听完成。以下是具体实现方法：
准备工作
安装Vue CLI创建项目或使用现有Vue项目：
npm install -g @vue/cli
vue create click-explosion创建爆炸组件
新建一个Explosion.vue组件：
<template>
<div class="container" @click="createExplosion">
<div
v-for="(particle, index) in particles"
:key="index"
class="particle"
:style="{
left: `${particle.x}px`,
top: `${particle.y}px`,
backgroundColor: particle.color,
transform: `rotate(${particle.rotation}deg) scale(${particle.scale})`
}"
></div>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
particles: []
}
},
methods: {
createExplosion(e) {
const colors = ['#ff0000', '#ffff00', '#ff00ff', '#00ffff', '#ffffff']
const particleCount = 20
for (let i = 0; i < particleCount; i++) {
const angle = Math.random() * Math.PI * 2
const speed = 2 + Math.random() * 4
const size = 5 + Math.random() * 10
this.particles.push({
x: e.clientX,
y: e.clientY,
color: colors[Math.floor(Math.random() * colors.length)],
rotation: Math.random() * 360,
scale: 1,
velocityX: Math.cos(angle) * speed,
velocityY: Math.sin(angle) * speed,
size: size,
alpha: 1,
life: 1000 + Math.random() * 500
})
}
const animate = () => {
this.particles.forEach(particle => {
particle.x += particle.velocityX
particle.y += particle.velocityY
particle.alpha -= 0.01
particle.scale *= 0.99
particle.life -= 16
})
this.particles = this.particles.filter(p => p.life > 0)
if (this.particles.length > 0) {
requestAnimationFrame(animate)
}
}
animate()
}
}
}
</script>
<style>
.container {
position: relative;
width: 100%;
height: 100vh;
cursor: pointer;
overflow: hidden;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
pointer-events: none;
will-change: transform, opacity;
}
</style>使用组件
在App.vue或其他组件中使用：
<template>
<Explosion>
<h1>点击屏幕任意位置产生爆炸效果</h1>
</Explosion>
</template>
<script>
import Explosion from './components/Explosion.vue'
export default {
components: {
Explosion
}
}
</script>高级优化方案
对于更复杂的效果，可以考虑以下改进：
- 使用Canvas渲染代替DOM元素，性能更好：
// 在methods中添加 createCanvasExplosion(e) { const canvas = document.createElement('canvas') canvas.style.position = 'fixed' canvas.style.pointerEvents = 'none' canvas.style.top = '0' canvas.style.left = '0' canvas.width = window.innerWidth canvas.height = window.innerHeight document.body.appendChild(canvas)
const ctx = canvas.getContext('2d') const particles = [] // 粒子生成逻辑...
function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height) // 绘制粒子... if (particles.length > 0) { requestAnimationFrame(animate) } else { document.body.removeChild(canvas) } } animate() }
2. 添加重力效果：
```javascript
particle.velocityY += 0.1 // 模拟重力- 使用GSAP动画库更流畅的动画：
import gsap from 'gsap'
// 替换原来的animate函数 gsap.ticker.add(() => { // 更新粒子位置 })
4. 预加载爆炸音效：
```javascript
const audio = new Audio('explosion.mp3')
audio.play()注意事项
- 移动端需要添加touch事件支持
- 大量粒子时考虑性能优化
- 可以调整粒子数量、大小和颜色获得不同视觉效果
- 对于复杂场景建议使用Three.js等3D库
