JS动态图片动画实现技巧

本文深入解析了如何用JavaScript实现高性能、无卡顿的动态图片动画，强调以requestAnimationFrame替代setTimeout/setInterval来精准匹配屏幕刷新率、避免后台掉帧；通过new Image()预加载所有帧并确保onload完成后再启动动画，杜绝因图片未就绪导致的闪白或中断；推荐用CSS opacity与绝对定位双图叠加实现平滑过渡，规避display切换引发的重排重绘；同时提供WebP/AVIF等现代格式的安全兼容方案，无论是picture标签动态更新还是服务端内容协商，都围绕一个核心目标：让每一张图在需要显示的瞬间早已就位内存——这才是丝滑动画背后真正的技术关键。

用 requestAnimationFrame 替代 setTimeout 做平滑动画

直接改 img.src 配合 setTimeout 看似简单，但容易卡顿、掉帧，尤其在低端设备或后台标签页里。浏览器对 requestAnimationFrame 有优化，能自动对齐屏幕刷新率，且在页面不可见时会暂停调用——这是它比轮询更靠谱的根本原因。

• 别用 setInterval 或高频 setTimeout（比如 setTimeout(..., 16)），它们不保证执行时机，还可能堆积回调
• 每次动画帧只做一件事：计算下一帧该显示哪张图，然后赋值给 img.src，不要在里面加 DOM 操作或网络请求
• 如果图片已缓存，切换几乎无延迟；若未缓存，img.src 赋值后需监听 onload 才能确保渲染，否则可能闪白或跳帧

预加载图片避免动画中断

动态切换时突然卡住一两帧？大概率是下一张图还没加载完。img.src 赋值那一刻才开始请求，而动画已经跑起来了。必须提前把所有图片实例创建好并触发加载。

• 用 new Image() 创建图片对象，立刻赋值 .src，不用插入 DOM
• 等所有 onload 触发后再启动动画循环，否则第一轮就可能 fallback 到空白
• 注意：不要复用同一个 Image 实例反复改 src，部分浏览器会中止前一个请求；每个地址配一个独立实例更稳

示例关键片段：

const frames = ['a.png', 'b.png', 'c.png'].map(src => {
  const img = new Image();
  img.src = src;
  return img;
});
Promise.all(frames.map(img => new Promise(r => img.onload = r))).then(startAnimation);

用 CSS opacity 或 visibility 避免重排重绘

如果动效需要淡入淡出、叠加切换，直接换 img.src 会导致硬切。此时不该靠 JS 搞多个 img 标签来回 show/hide——那样触发 layout，性能差。

• 用两个 标签叠在一起，靠 opacity 和 transition 做交叉淡化，JS 只控制 class 切换
• 确保父容器设了 position: relative，子图设 position: absolute + top: 0; left: 0
• 慎用 display: none 切换，它会触发重排；visibility: hidden 更轻量，但依然占布局空间

处理 WebP/AVIF 等现代格式的兼容性 fallback

想用更小体积的 .webp 做动画？别直接写死后缀。用户浏览器不支持时，img 会挂掉，动画就停在半路。

• 用 picture + source 是标准解法，但注意：JS 动态切换时，不能只改 img.src，得同步更新 picture 内的 source[srcset]
• 更简单的方案：服务端根据 Accept 请求头返回对应格式，前端统一用 .png 后缀，实际响应可能是 WebP
• 本地开发时，Chrome 可能缓存失败的 WebP 请求，导致后续一直 fallback，清空缓存或用无痕模式验证

真正麻烦的不是怎么播，而是怎么让每一张图都在该出现的时候「已经躺在内存里」——预加载漏一张，动画就露馅一次。

理论要掌握，实操不能落！以上关于《JS动态图片动画实现技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！