如何修复滚动动画最后一张图像无法显示的问题

本文详解滚动驱动 canvas 动画中因索引边界错误导致最后一帧图像缺失的根本原因，并提供可直接落地的修复方案，涵盖预加载逻辑、帧序号计算与边界处理三方面优化。

本文详解滚动驱动 canvas 动画中因索引边界错误导致最后一帧图像缺失的根本原因，并提供可直接落地的修复方案，涵盖预加载逻辑、帧序号计算与边界处理三方面优化。

在基于滚动位置切换 JPEG 序列帧的 Canvas 动画中，最后一帧（如第 750 帧）无法渲染，通常并非性能或加载问题，而是数组索引与帧序号映射逻辑存在系统性越界偏差。核心问题出在两处关键边界处理：

? 问题定位：双重索引偏移

1. 预加载循环遗漏最后一帧
   原代码使用 for (let i = 1; i < frameCount; i++)，当 frameCount = 750 时，i 最大为 749，导致 images[748]（对应第 749 帧）是数组末尾，第 750 帧从未被创建和加载。

2. 帧序号计算强制截断
   Math.min(frameCount - 1, Math.ceil(scrollFraction * frameCount)) 将结果上限锁死在 749，即使滚动到底部（scrollFraction = 1），计算得 Math.ceil(1 * 750) = 750，也会被截断为 749——而 images[749] 实际不存在（数组长度仅 749），最终触发 undefined 图像绘制。

✅ 正确修复方案

1. 修正预加载范围（含第 750 帧）

const preloadImages = () => {    const images = [];    // 关键修改：i <= frameCount，确保加载 1 到 750 共 750 张图    for (let i = 1; i <= frameCount; i++) {        const img = new Image();        img.src = currentFrame(i);        images.push(img);    }    return images;};

2. 移除冗余截断，信任数学计算

const frameIndex = Math.ceil(scrollFraction * frameCount);// 不再使用 Math.min(frameCount - 1, ...) —— 因为 scrollFraction ∈ [0, 1]，// 所以 frameIndex ∈ [1, frameCount]，且已通过 preload 确保 images[frameIndex-1] 存在

3. 安全访问图像 + 边界兜底（增强鲁棒性）

const updateImage = index => {    // 防御性检查：确保 index 在有效范围内 [1, frameCount]    if (index < 1 || index > frameCount) return;    const img = images[index - 1]; // 数组索引从 0 开始    context.clearRect(0, 0, canvas.width, canvas.height);    context.drawImage(img, 0, 0, canvas.width, canvas.height);};

⚠️ 注意事项与最佳实践

• 索引一致性：本方案采用 1-based 帧编号（即 photo_animation4/0001.jpg → index=1），所有逻辑需统一此约定，避免混用 0-based 和 1-based。
• 首帧加载时机：原代码单独加载 firstImage 已无必要，因 preloadImages() 已包含全部帧；可移除该逻辑，改用 Promise.all(images.map(img => new Promise(r => img.onload = r))) 实现真正的全量就绪检测。
• 滚动精度优化：scrollTop / (scrollHeight - innerHeight) 在动态内容下可能因布局抖动产生微小误差，建议在 scroll 事件中添加防抖或使用 requestAnimationFrame 节流：

  let isScrolling;window.addEventListener('scroll', () => {    clearTimeout(isScrolling);    isScrolling = setTimeout(() => {        const scrollTop = html.scrollTop;        const maxScrollTop = html.scrollHeight - window.innerHeight;        const scrollFraction = maxScrollTop === 0 ? 0 : scrollTop / maxScrollTop;        const frameIndex = Math.max(1, Math.min(frameCount, Math.ceil(scrollFraction * frameCount)));        if (frameIndex !== currentFrameIndex) {            currentFrameIndex = frameIndex;            updateImage(currentFrameIndex);        }    }, 16);});

修复后，滚动至页面底部时 scrollFraction ≈ 1 → frameIndex = 750 → images[749] 成功渲染，最后一帧将稳定呈现。记住：动画的完整性始于精确的索引数学，而非视觉调试。