如何优化 Canvas 逐帧动画以消除闪烁与卡顿

花韻仙語

发布时间：2026-01-24 09:29:22

953人浏览过

来源于php中文网

原创

如何优化 Canvas 逐帧动画以消除闪烁与卡顿

本文详解如何通过预加载全部帧图像并避免动态切换 img.src 引发的竞态条件，彻底解决透明 png 在 canvas 中逐帧播放时出现的瞬时空白、闪烁和卡顿问题。

在基于滚动触发的 Canvas 动画中（如产品展示页的帧动画），若采用“按需设置 img.src + drawImage”的旧模式，极易因图像未就绪导致渲染空白——这是因为 img.onload 是异步事件，而 drawImage 在图像尚未加载完成时会静默失败（不报错，但不绘制），造成几毫秒的全透明“闪帧”，尤其在 Chrome 等浏览器中表现明显。

根本原因并非 clearRect 或 drawImage 性能瓶颈，而是资源加载与渲染逻辑的竞态：每次滚动都重新赋值 img.src，但未等待其加载完成就立即绘制，导致大量无效绘制调用。

✅ 正确解法是：预加载所有帧为已就绪的 Image 实例，并缓存于数组中，确保每一帧调用 drawImage 时，图像资源 100% 可用。

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

Mootion

Mootion是一个革命性的3D动画创作平台，利用AI技术来简化和加速3D动画的制作过程。

下载

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

// 生成全部帧 URL（注意：索引从 1 开始，补零至 3 位）
const imageUrls = Array.from({ length: frameCount }, (_, i) =>
  `https://www.dr-adler.com/content/produkte/Sheabutter/renderAnimation/${(i + 1).toString().padStart(3, '0')}.png`
);

// 异步预加载单张图，返回已加载完成的 Image 对象
const preloadImage = (src) => {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => resolve(null); // 防止某帧失败阻塞整体
    img.src = src;
  });
};

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

// 初始化动画系统
const init = async () => {
  console.log('开始预加载...');
  const images = await preloadAllFrames();

  // 过滤掉加载失败的帧（可选：替换为占位图或跳过）
  const validImages = images.filter(img => img !== null);
  if (validImages.length < frameCount) {
    console.warn(`警告：仅成功加载 ${validImages.length}/${frameCount} 帧`);
  }

  // 设置画布尺寸（建议在 CSS 中固定，此处确保像素精准）
  canvas.width = 750;
  canvas.height = 750;

  // 首帧立即渲染
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(validImages[0], 0, 0);

  // 绑定滚动监听：根据滚动位置计算目标帧索引，并 requestAnimationFrame 安全更新
  window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop;
    const maxScrollTop = 750;
    const scrollFraction = Math.max(0, Math.min(1, scrollTop / maxScrollTop));
    const frameIndex = Math.min(validImages.length - 1, Math.floor(scrollFraction * validImages.length));

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

  console.log('动画初始化完成，共加载', validImages.length, '帧');
};

// 启动
init();

? 关键优化点说明：