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

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

在使用

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

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

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

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>
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();