js实现粒子变换
实现粒子变换的基本思路
粒子变换通常指通过JavaScript动态生成、移动和变换大量小元素（粒子），形成视觉效果。核心步骤包括创建粒子系统、定义粒子行为、渲染及动画更新。
创建粒子系统
使用HTML5 Canvas或WebGL作为渲染基础。Canvas适合简单2D效果，WebGL适合高性能3D场景。以下以Canvas为例：
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
const particles = [];
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 5 + 1;
this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
this.velocityX = Math.random() * 2 - 1;
this.velocityY = Math.random() * 2 - 1;
}
}定义粒子行为
粒子行为包括运动、碰撞检测或变换逻辑。例如实现随机运动与边界反弹：
update() {
this.x += this.velocityX;
this.y += this.velocityY;
// 边界检测
if (this.x < 0 || this.x > canvas.width) this.velocityX *= -1;
if (this.y < 0 || this.y > canvas.height) this.velocityY *= -1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}动画循环与性能优化
使用requestAnimationFrame实现平滑动画，控制粒子数量避免性能问题：
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animate);
}
// 初始化粒子
for (let i = 0; i < 100; i++) {
particles.push(new Particle(
Math.random() * canvas.width,
Math.random() * canvas.height
));
}
animate();高级变换效果
实现粒子从一种形状/颜色变换到另一种状态，可通过插值算法：
// 颜色渐变示例
this.targetColor = 'hsl(270, 100%, 50%)';
this.currentHue = 0;
updateColor() {
this.currentHue = lerp(this.currentHue, 270, 0.05);
this.color = `hsl(${this.currentHue}, 100%, 50%)`;
}
function lerp(start, end, t) {
return start * (1 - t) + end * t;
}交互增强
添加鼠标交互使粒子跟随或排斥：
canvas.addEventListener('mousemove', (e) => {
particles.forEach(particle => {
const dx = e.clientX - particle.x;
const dy = e.clientY - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
particle.velocityX = dx * 0.01;
particle.velocityY = dy * 0.01;
}
});
});性能优化技巧
- 使用对象池复用粒子对象
- 对静态粒子启用
will-change: transform - 减少Canvas操作次数，批量绘制
- 对于复杂效果考虑使用WebGL库如Three.js
完整实现可参考开源库如particles.js或GSAP动画库的高级用例。
