Firefox Canvas 缩放动画的抖动问题及平滑解决方案-js教程-PHP中文网

Firefox Canvas 缩放动画的抖动问题及平滑解决方案

Firefox 中对元素使用 CSS transform: scale() 时可能出现视觉抖动，这是其渲染管线在亚像素变换处理上的已知缺陷；本文提供基于时间戳的高精度帧控制与数值截断优化方案，显著提升动画流畅度。

firefox 中对 `canvas>` 元素使用 css `transform: scale()` 时可能出现视觉抖动，这是其渲染管线在亚像素变换处理上的已知缺陷；本文提供基于时间戳的高精度帧控制与数值截断优化方案，显著提升动画流畅度。

Firefox（尤其是 v121+）在渲染经 CSS scale() 变换的 <canvas></canvas> 时，常出现细微但可察觉的“跳变”或“抖动”（jitteriness），而 Safari 和 Chromium 表现正常。该现象本质源于 Firefox 对 transform 插值过程中浮点精度累积误差的敏感性，尤其在快速缩放动画中，requestAnimationFrame 提供的时间戳若未经规范化处理，易导致每帧计算出的缩放值存在微小不一致，进而触发重排/重绘抖动。

核心解决思路：
✅ 使用 requestAnimationFrame 的原生 timestamp 参数替代 performance.now() 独立调用，避免高频时间采样偏差；
✅ 对中间计算值（如 t2）进行可控精度截断（如 .toFixed(3)），消除浮点运算尾数噪声；
✅ 引入微量偏移（如 + 0.0002）打破 Firefox 渲染器对特定临界值的亚像素舍入策略，缓解抖动触发条件。

以下是优化后的完整实现：

<style>
  canvas {
    margin: 100px;
    /* 关键：启用硬件加速，减少合成层抖动 */
    will-change: transform;
  }
</style><canvas width="400" height="400"></canvas><script>
  window.onload = function () {
    const canvas = document.querySelector("canvas");
    const ctx = canvas.getContext("2d");

    // 绘制初始内容
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(50, 50, 300, 300);

    // 动画参数
    const duration = 2000; // 2秒动画
    let startTime = null;

    const tick = (timestamp) => {
      if (!startTime) startTime = timestamp;
      const elapsed = timestamp - startTime;
      const t = Math.min(1, elapsed / duration);
      // easeOutExpo: 1 - 2^(-10 * t)，截断至千分位并加微量偏移防抖
      const t2 = parseFloat((1 - Math.pow(2, -10 * t)).toFixed(3)) + 0.0002;
      const scale = 1 - 0.5 * parseFloat(t2.toFixed(3));

      canvas.style.transform = `scale(${scale})`;

      if (elapsed < duration) {
        requestAnimationFrame(tick);
      }
    };

    requestAnimationFrame(tick);
  };
</script>

额外建议与注意事项：