当前位置：首页 > JavaScript

js实现粒子变换

2026-02-03 08:32:10JavaScript

实现粒子变换的基本思路

粒子变换通常指通过JavaScript动态生成、移动和变换大量小元素（粒子），形成视觉效果。核心步骤包括创建粒子系统、定义粒子行为、渲染及动画更新。

创建粒子系统

使用HTML5 Canvas或WebGL作为渲染基础。Canvas适合简单2D效果，WebGL适合高性能3D场景。以下以Canvas为例：

js实现粒子变换

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实现平滑动画，控制粒子数量避免性能问题：

js实现粒子变换

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;
    }
  });
});