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

本文详解 canvas 中逐帧播放 png 动画时出现卡顿、闪屏的根本原因，并提供基于预加载 + 图像缓存的高性能解决方案，彻底规避 `img.src` 动态赋值引发的竞态问题。

在使用 Canvas 实现滚动驱动的逐帧动画（如产品展示中的透明 PNG 序列）时，开发者常遇到「画面短暂消失」「跳帧」「闪烁」等视觉抖动问题。表面看是性能不足导致渲染滞后，但真实瓶颈往往并非 clearRect 或 drawImage 本身，而是图像资源加载的异步不确定性——原代码中反复修改 img.src 并立即调用 drawImage，极易触发未完成加载的空图像绘制，造成数毫秒的透明空白帧。

✅ 核心问题：img.src 动态赋值引发竞态

原始逻辑中：

img.src = currentFrame(index); // 异步开始加载
context.drawImage(img, 0, 0);  // 此时 img 可能尚未 onload，宽高为 0 → 绘制失败/空白

浏览器不会等待图片加载完成就执行绘图，导致 drawImage 绘制一个“空”或“未就绪”的 对象，Canvas 即刻变透明。

✅ 正确解法：预加载全部帧并缓存为就绪图像对象

必须确保每一帧图像在首次使用前已完全加载完毕。推荐采用 Promise.all() 并行预加载所有 PNG，并将每个 Image 实例（含 onload 后的完整像素数据）存入数组：

const frameCount = 120;
const imageUrls = Array.from({ length: frameCount }, (_, i) =>
  `https://www.dr-adler.com/content/produkte/Sheabutter/renderAnimation/${(i + 1).toString().padStart(3, '0')}.png`
);

// 封装单图加载为 Promise
const preloadImage = (src) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => console.warn(`Failed to load frame: ${src}`);
    img.src = src;
  });
};

// 并行预加载全部帧，返回就绪 Image 实例数组
const preloadImages = () => Promise.all(imageUrls.map(preloadImage));

✅ 渲染逻辑：纯同步绘制，零加载延迟

预加载完成后，滚动监听器直接从缓存数组中取已就绪图像绘制，无需任何异步等待：

let images = [];

const init = async () => {
  images = await preloadImages();
  console.log('✅ All frames preloaded:', images.length);

  // 初始绘制第一帧
  context.clearRect(0, 0, canvas.width
, canvas.height);
  context.drawImage(images[0], 0, 0);

  // 滚动驱动帧切换（注意：使用 requestAnimationFrame 包裹以对齐刷新率）
  window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop;
    const scrollFraction = Math.min(1, scrollTop / 750); // 归一化 [0, 1]
    const frameIndex = Math.min(frameCount - 1, Math.floor(scrollFraction * frameCount));

    requestAnimationFrame(() => {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(images[frameIndex], 0, 0);
    });
  });
};

init();

⚠️ 关键注意事项

• 禁止复用同一 Image 实例：每个帧必须对应独立 Image 对象，否则 onload 回调可能被覆盖或错乱；
• 务必处理 onerror：网络失败时提供降级策略（如占位图或日志告警）；
• Canvas 尺寸需显式设置：避免 CSS 缩放导致像素失真，且应在预加载前完成 canvas.width/height 设置；
• requestAnimationFrame 是必需的：确保绘制与屏幕刷新率同步，避免丢帧；
• 内存权衡：120 张 750×750 PNG（约 1–3 MB/张）可能占用百 MB 内存，生产环境建议按需分段加载或使用 WebP/AVIF 压缩。

通过将「资源加载」与「渲染执行」彻底解耦，本方案消除了所有因加载时机不可控导致的视觉中断，实现真正丝滑的滚动帧动画。对于高保真产品展示场景，这是兼顾效果与稳定性的最佳实践。