原生JS实现抛物线动画与动态模糊效果

在Web动画开发中，抛物线轨迹与动态模糊是两个极具视觉表现力的技术点。原生JavaScript凭借其轻量级和高度可控的特性，成为实现这类特效的理想选择。本文将通过数学建模、Canvas渲染和性能优化三个维度，系统讲解如何构建流畅的抛物线动画并叠加动态模糊效果。

一、抛物线动画的数学基础

1.1 抛物线运动模型构建

抛物线运动本质是二维平面上的匀加速运动，其轨迹方程可表示为：

x = v0x * t
y = v0y * t - 0.5 * g * t²

其中v0x、v0y为初始速度分量，g为重力加速度（通常取9.8m/s²的像素等效值）。在实际开发中，我们需要将物理单位转换为屏幕像素：

const gravity = 0.5; // 像素/帧²
let time = 0;
function calculatePosition(v0x, v0y) {
  const x = v0x * time;
  const y = v0y * time - 0.5 * gravity * time * time;
  time++;
  return {x, y};
}

1.2 贝塞尔曲线优化方案

对于需要更复杂轨迹的场景，可采用二次贝塞尔曲线模拟抛物线：

function getBezierPoint(t, p0, p1, p2) {
  const mt = 1 - t;
  return {
    x: mt * mt * p0.x + 2 * mt * t * p1.x + t * t * p2.x,
    y: mt * mt * p0.y + 2 * mt * t * p1.y + t * t * p2.y
  };
}
// 控制点设置技巧：将中点y坐标下移模拟重力效果

二、Canvas渲染体系构建

2.1 双缓冲技术实现

为避免动画闪烁，必须实现离屏渲染：

const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d');
const bufferCanvas = document.createElement('canvas');
bufferCanvas.width = canvas.width;
bufferCanvas.height = canvas.height;
const bufferCtx = bufferCanvas.getContext('2d');
function render() {
  // 在bufferCanvas上绘制
  bufferCtx.clearRect(0, 0, bufferCanvas.width, bufferCanvas.height);
  drawParticle(bufferCtx, currentPos);
  // 一次性绘制到主canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(bufferCanvas, 0, 0);
}

2.2 粒子系统设计

构建可扩展的粒子类：

class Particle {
  constructor(x, y, vx, vy) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.life = 100;
    this.size = Math.random() * 5 + 2;
  }
  update() {
    this.x += this.vx;
    this.y += this.vy - 0.25; // 重力分量
    this.vy *= 0.99; // 空气阻力
    this.life--;
    return this.life > 0;
  }
  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 100, 100, ${this.life/100})`;
    ctx.fill();
  }
}

三、动态模糊实现方案

3.1 运动模糊算法

基于速度向量的模糊实现：

function applyMotionBlur(ctx, particle, prevPos) {
  const blurRadius = Math.max(2, Math.abs(particle.vx) * 0.5);
  const gradient = ctx.createRadialGradient(
    particle.x, particle.y, 0,
    particle.x, particle.y, blurRadius
  );
  gradient.addColorStop(0, 'rgba(255,100,100,0.8)');
  gradient.addColorStop(1, 'rgba(255,100,100,0)');
  ctx.save();
  ctx.beginPath();
  ctx.arc(particle.x, particle.y, blurRadius, 0, Math.PI * 2);
  ctx.fillStyle = gradient;
  ctx.fill();
  ctx.restore();
}

3.2 高斯模糊优化

对于静态元素的模糊效果，可采用分离滤波的高斯模糊：

function gaussianBlur(ctx, radius = 5) {
  // 水平模糊
  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');
  // ...实现水平模糊代码
  // 垂直模糊
  // ...实现垂直模糊代码
  ctx.drawImage(tempCanvas, 0, 0);
}

四、性能优化策略

4.1 分层渲染技术

将静态背景与动态元素分离：

// 背景层（低频更新）
function renderBackground() {
  staticCtx.fillStyle = '#000';
  staticCtx.fillRect(0, 0, canvas.width, canvas.height);
}
// 动态层（高频更新）
function renderDynamic() {
  dynamicCtx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => p.draw(dynamicCtx));
}

4.2 请求动画帧优化

使用rAF的精确时序控制：

let lastTime = 0;
function animate(timestamp) {
  const deltaTime = timestamp - lastTime;
  if (deltaTime > 16) { // 限制帧率
    updateParticles();
    render();
    lastTime = timestamp;
  }
  requestAnimationFrame(animate);
}

五、完整实现示例

<canvas id="canvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = (Math.random() - 0.5) * 8;
    this.vy = Math.random() * -15;
    this.life = 100;
    this.trail = [];
  }
  update() {
    this.trail.push({x: this.x, y: this.y});
    if (this.trail.length > 10) this.trail.shift();
    this.x += this.vx;
    this.y += this.vy + 0.25;
    this.vy += 0.25; // 重力
    this.life--;
    return this.life > 0;
  }
  draw(ctx) {
    // 绘制轨迹
    ctx.beginPath();
    ctx.moveTo(this.trail[0].x, this.trail[0].y);
    for (let i = 1; i < this.trail.length; i++) {
      ctx.lineTo(this.trail[i].x, this.trail[i].y);
    }
    ctx.strokeStyle = `rgba(255,100,100,${this.life/200})`;
    ctx.lineWidth = 2;
    ctx.stroke();
    // 绘制主体
    ctx.beginPath();
    ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255,200,100,${this.life/100})`;
    ctx.fill();
  }
}
let particles = [];
function createParticle(x, y) {
  particles.push(new Particle(x, y));
}
function update() {
  particles = particles.filter(p => p.update());
}
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => p.draw(ctx));
}
function animate() {
  update();
  render();
  requestAnimationFrame(animate);
}
canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  createParticle(e.clientX - rect.left, e.clientY - rect.top);
});
animate();
</script>

六、进阶优化方向

1. Web Workers：将粒子物理计算移至工作线程
2. WebGL加速：使用着色器实现批量粒子渲染
3. 空间分区：对大规模粒子系统进行四叉树管理
4. 预计算表：存储常用物理计算结果

通过上述技术组合，开发者可以在不依赖任何第三方库的情况下，实现高性能的抛物线动画与动态模糊效果。这种原生实现方式不仅具有最佳的控制灵活性，还能显著减少资源占用，特别适合对性能要求严苛的移动端Web应用。