如何实现流畅的逐帧透明动画（Canvas 帧序列优化方案）

本文详解 canvas 逐帧动画卡顿的根本原因——图像加载竞态条件，并提供预加载全部帧、按需渲染的完整解决方案，彻底消除闪烁与空白帧问题。

在使用 <canvas> 实现基于滚动触发的逐帧动画时，常见“画面突然消失几毫秒”或“闪烁抖动”的现象（尤其在 Chrome 中），其本质并非 clearRect 或 drawImage 性能瓶颈，而是图像资源加载的异步竞态问题：当直接修改 img.src 并立即调用 drawImage 时，若新图片尚未完成解码，Canvas 就会绘制一张空或未就绪的图像，导致短暂透明或空白帧。

✅ 正确做法：预加载 + 预解码所有帧

核心原则是：所有帧图像必须在动画开始前完成加载并解码完毕，确保每次 drawImage 调用都操作的是内存中已就绪的 HTMLImageElement 对象，而非依赖动态赋值 src 触发的异步加载流程。

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

吐槽大师

吐槽大师（Roast Master） - 终极 AI 吐槽生成器，适用于 Instagram，Facebook，Twitter，Threads 和 Linkedin

下载

const canvas = document.getElementById("prodPicAnimation");
const ctx = canvas.getContext("2d");
const frameCount = 120;
const canvasSize = 750;

canvas.width = canvasSize;
canvas.height = canvasSize;

// 生成 120 帧 URL（序号从 001 到 120）
const imageUrls = Array.from({ length: frameCount }, (_, i) =>
  `https://www.dr-adler.com/content/produkte/Sheabutter/renderAnimation/${String(i + 1).padStart(3, '0')}.png`
);

// 异步预加载单张图并返回已解码的 Image 实例
const preloadImage = (src) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img); // onload 保证图像已解码
    img.onerror = () => resolve(null); // 容错处理
    img.src = src;
  });
};

// 批量预加载全部帧，返回 Promise<Array<Image>>
const preloadAllFrames = () => Promise.all(imageUrls.map(preloadImage));

// 渲染函数：仅负责清空+绘制，无任何异步逻辑
const renderFrame = (img) => {
  if (!img) return; // 跳过加载失败的帧
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0);
};

// 初始化：等待全部帧就绪后启动滚动监听
const init = async () => {
  console.log("⏳ 开始预加载 120 帧...");
  const frames = await preloadAllFrames();

  // 移除加载提示（如存在）
  document.getElementById('loading')?.remove();
  console.log("✅ 全部帧加载完成，首帧渲染中");
  renderFrame(frames[0]);

  // 滚动驱动帧切换（注意：使用 requestAnimationFrame 包裹，避免重复触发）
  let isAnimating = false;
  window.addEventListener('scroll', () => {
    if (isAnimating) return;
    isAnimating = true;

    requestAnimationFrame(() => {
      const scrollTop = document.documentElement.scrollTop;
      const maxScrollTop = 750;
      const scrollFraction = Math.max(0, Math.min(1, scrollTop / maxScrollTop));
      const frameIndex = Math.floor(scrollFraction * (frameCount - 1)); // 0~119

      renderFrame(frames[frameIndex]);
      isAnimating = false;
    });
  });
};

init();

⚠️ 关键注意事项

• 禁止复用单个 Image 对象：原代码中反复设置 img.src 是典型错误源。每个帧必须对应独立、已加载完成的 Image 实例。
• onload 是解码完成信号：Image.onload 触发时，图像已解码进内存，可安全用于 drawImage；而仅靠 src 赋值无法保证此状态。
• 防抖滚动监听：高频 scroll 事件易造成冗余 requestAnimationFrame 调用，使用 isAnimating 标志位控制节流。
• 尺寸一致性：确保所有 PNG 帧分辨率统一（如本例均为 750×750），避免每次 drawImage 触发 Canvas 内部重采样开销。
• 兜底容错：preloadImage 中加入 onerror 处理，防止某帧加载失败导致整个动画中断。

✅ 效果对比

通过该方案，动画将获得真正平滑、零闪烁的视觉体验，适用于产品展示、交互式导览等对质感要求较高的场景。