滚动动画最后一帧图像不显示的修复方法

当页面滚动至底部，动画却停滞在倒数第二帧——最后一帧图像始终无法显示。这并非神秘现象，而是一个典型的“边界索引”错误。本文将深入剖析这一问题的根本原因，并提供可直接应用的修复方案，涵盖预加载、帧序号计算以及边界处理等关键环节。

基于滚动位置切换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，但会被 Math.min 强制截断为 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] 成功渲染，最后一帧即可稳定呈现。请记住：动画的完整性，源于精确的索引数学，而非依赖肉眼调试碰运气。