原生JS抛物线动画与动态模糊：从理论到实践的深度解析

一、抛物线动画的数学原理与实现

抛物线动画的核心在于通过二次函数模拟物体的运动轨迹。在二维平面中，抛物线方程可表示为：
[ y = ax^2 + bx + c ]
其中，a决定抛物线的开口方向与曲率，b影响对称轴位置，c为初始高度。实际开发中，我们更关注水平位移（x）与垂直位移（y）的动态关系。

1.1 抛物线参数计算

假设物体从起点 (startX, startY) 抛向终点 (endX, endY)，需计算抛物线的二次项系数 a 和水平速度 vx。

• 水平速度：vx = (endX - startX) / duration
• 垂直位移方程：通过顶点式推导，顶点坐标为 ( (startX+endX)/2, maxHeight )，可反推出 a 的值。
  代码示例：

  function calculateParabola(start, end, maxHeight, duration) {
  const vx = (end.x - start.x) / duration;
  const vertexX = (start.x + end.x) / 2;
  // 顶点式：y = a(x - vertexX)^2 + maxHeight
  // 代入起点 (start.x, start.y) 解 a
  const a = (start.y - maxHeight) / Math.pow(start.x - vertexX, 2);
  return { a, vx };
  }

1.2 动画帧更新逻辑

通过 requestAnimationFrame 逐帧更新物体位置，结合时间戳控制速度。
关键点：

• 时间归一化：将当前时间映射到 [0, duration] 区间，确保动画时长一致。

• 位移计算：根据归一化时间 t 计算当前 x 和 y 坐标。
  代码示例：

  function animateParabola(element, start, end, maxHeight, duration) {
  const { a, vx } = calculateParabola(start, end, maxHeight, duration);
  const startTime = performance.now();
  function update(currentTime) {
    const elapsed = currentTime - startTime;
    const t = Math.min(elapsed / duration, 1);
    const currentX = start.x + vx * elapsed;
    // 防止超出终点
    const clampedX = Math.min(currentX, end.x);
    const deltaX = clampedX - start.x;
    const vertexX = (start.x + end.x) / 2;
    const currentY = a * Math.pow(clampedX - vertexX, 2) + maxHeight;
    // 当接近终点时停止
    if (t >= 1) {
      element.style.left = `${end.x}px`;
      element.style.top = `${end.y}px`;
      return;
    }
    element.style.left = `${clampedX}px`;
    element.style.top = `${currentY}px`;
    if (t < 1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
  }

二、动态模糊效果的实现策略

动态模糊通过模拟物体高速运动时的视觉残留增强真实感。原生JS中可通过以下方式实现：

2.1 CSS filter 属性

利用 filter: blur() 快速实现静态模糊，但无法动态跟随运动轨迹。
局限性：模糊半径固定，无法体现速度变化。

2.2 Canvas 动态绘制与模糊

通过 CanvasRenderingContext2D.filter 或手动计算像素模糊实现更灵活的效果。
步骤：

1. 创建离屏Canvas，绘制物体并应用模糊。

2. 在主Canvas中合成模糊层与清晰层。
   代码示例：

   function createBlurredTrail(ctx, positions, blurRadius) {
   const offscreenCanvas = document.createElement('canvas');
   offscreenCanvas.width = ctx.canvas.width;
   offscreenCanvas.height = ctx.canvas.height;
   const offscreenCtx = offscreenCanvas.getContext('2d');
   // 绘制模糊轨迹
   offscreenCtx.filter = `blur(${blurRadius}px)`;
   positions.forEach(pos => {
    offscreenCtx.beginPath();
    offscreenCtx.arc(pos.x, pos.y, 10, 0, Math.PI * 2);
    offscreenCtx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    offscreenCtx.fill();
   });
   ctx.drawImage(offscreenCanvas, 0, 0);
   }

2.3 基于速度的动态模糊算法

模糊半径与物体速度成正比，通过计算瞬时速度动态调整 blur() 值。
优化点：

• 使用线性插值平滑模糊半径变化。
• 限制最大模糊半径避免性能问题。
  代码示例：

  function updateBlur(element, speed, maxBlur) {
  const blur = Math.min(speed * 0.1, maxBlur); // 调整系数
  element.style.filter = `blur(${blur}px)`;
  }

三、性能优化与跨浏览器兼容性

3.1 减少重绘与回流

• 使用 transform: translate() 替代 top/left 减少布局计算。
• 对静态背景使用 will-change: transform 提示浏览器优化。

3.2 节流与防抖

在高速动画中，通过节流控制模糊计算频率，避免每帧都执行复杂运算。
代码示例：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  }
}

3.3 浏览器兼容性处理

• 检测 requestAnimationFrame 支持，提供降级方案（如 setTimeout）。
• 对不支持 filter 的浏览器使用Canvas替代方案。

四、完整案例：购物车商品飞入效果

结合抛物线动画与动态模糊，实现商品从页面任意位置飞入购物车的交互。
关键代码：

// 初始化
const cart = document.getElementById('cart');
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', () => {
    const start = { x: item.offsetLeft, y: item.offsetTop };
    const end = { x: cart.offsetLeft + 20, y: cart.offsetTop + 20 };
    animateParabola(item.cloneNode(true), start, end, 100, 1000);
  });
});
// 抛物线动画封装
function animateParabola(element, start, end, maxHeight, duration) {
  // ...前文calculateParabola与animate逻辑...
  const positions = []; // 记录轨迹用于模糊
  function update(currentTime) {
    // ...位置计算...
    positions.push({ x: clampedX, y: currentY });
    if (positions.length > 10) positions.shift(); // 限制轨迹长度
    // 动态模糊
    const speed = Math.sqrt(Math.pow(vx, 2) + Math.pow(vy, 2)); // 假设vy通过y变化率计算
    updateBlur(element, speed, 10);
    if (t < 1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

五、总结与扩展建议

1. 数学建模：抛物线参数需根据实际场景调整，可通过贝塞尔曲线实现更复杂的轨迹。
2. 性能监控：使用 performance.now() 分析动画帧率，优化耗时操作。
3. 扩展方向：结合WebGL实现3D抛物线效果，或使用Web Workers处理复杂模糊计算。

通过原生JS实现抛物线动画与动态模糊，开发者可灵活控制交互细节，同时避免第三方库的体积与兼容性问题。掌握核心原理后，可进一步探索物理引擎集成或GPU加速方案。