vue实现点击爆炸
Vue实现点击爆炸效果
在Vue中实现点击爆炸效果，可以通过CSS动画和动态生成元素来完成。以下是两种常见方法：
方法一：使用CSS动画和动态元素
创建爆炸粒子效果，通过点击事件生成多个小元素并应用动画。
<template>
<div class="container" @click="createExplosion">
<div
v-for="(particle, index) in particles"
:key="index"
class="particle"
:style="particle.style"
></div>
</div>
</template>
<script>
export default {
data() {
return {
particles: []
}
},
methods: {
createExplosion(event) {
const particleCount = 20;
const newParticles = [];
for (let i = 0; i < particleCount; i++) {
const angle = Math.random() * Math.PI * 2;
const distance = Math.random() * 50 + 30;
const duration = Math.random() * 1 + 0.5;
newParticles.push({
style: {
left: `${event.clientX}px`,
top: `${event.clientY}px`,
backgroundColor: `hsl(${Math.random() * 360}, 100%, 50%)`,
transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`,
opacity: 0,
transition: `all ${duration}s ease-out`
}
});
}
this.particles = newParticles;
setTimeout(() => {
this.particles = [];
}, 1000);
}
}
}
</script>
<style>
.container {
position: relative;
width: 100%;
height: 100vh;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
pointer-events: none;
}
</style>方法二：使用第三方库
对于更复杂的爆炸效果，可以考虑使用动画库如anime.js或gsap。
-
安装anime.js：
npm install animejs -
实现代码：
<template> <div class="container" @click="explode"> <div ref="target" class="box"></div> </div> </template>
export default {
methods: {
explode(event) {
const particles = [];
for (let i = 0; i < 30; i++) {
particles.push({
x: event.clientX,
y: event.clientY,
color: hsl(${Math.random() * 360}, 100%, 50%),
radius: Math.random() * 10 + 5
});
}
anime({
targets: particles,
x: function(p) { return p.x + (Math.random() - 0.5) * 200; },
y: function(p) { return p.y + (Math.random() - 0.5) * 200; },
opacity: 0,
radius: 0,
duration: 1000,
easing: 'easeOutExpo',
update: function() {
const ctx = this.$refs.canvas?.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
particles.forEach(p => {
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.fill();
});
}
}
});
}}, mounted() { const canvas = document.createElement('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style.position = 'fixed'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.pointerEvents = 'none'; this.$refs.target.appendChild(canvas); this.$refs.canvas = canvas; } }
```方法三：使用Canvas绘制爆炸
对于高性能需求，使用Canvas绘制爆炸效果更为合适。
<template>
<canvas ref="canvas" @click="explode" width="800" height="600"></canvas>
</template>
<script>
export default {
methods: {
explode(event) {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const particles = [];
for (let i = 0; i < 50; i++) {
particles.push({
x, y,
vx: Math.random() * 10 - 5,
vy: Math.random() * 10 - 5,
radius: Math.random() * 5 + 2,
color: `hsl(${Math.random() * 360}, 100%, 50%)`,
life: 100
});
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
p.x += p.vx;
p.y += p.vy;
p.life--;
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.globalAlpha = p.life / 100;
ctx.fill();
}
particles = particles.filter(p => p.life > 0);
if (particles.length > 0) {
requestAnimationFrame(animate);
}
}
animate();
}
}
}
</script>关键点说明
- 粒子生成：每次点击时创建多个粒子对象
- 物理模拟：为粒子添加速度和生命周期
- 动画控制：使用CSS transition或JavaScript动画库
- 性能优化：对于大量粒子，Canvas比DOM操作更高效
可以根据实际需求调整粒子数量、颜色、运动轨迹等参数来获得不同的爆炸效果。
