requestAnimationFrame动画制作技巧详解

本文深入解析了 requestAnimationFrame 在高性能动画开发中的正确使用场景与实践要点，强调它并非万能方案，而应专用于需与屏幕刷新率同步的连续视觉更新（如Canvas绘图、滚动视差、物理模拟等），一次性动画则应优先选用轻量且浏览器深度优化的CSS transition；文章通过精简示例代码揭示了“递归调用+高精度时间戳”这一核心模式，警示避免Date.now()、DOM重复查询及与CSS transition混用同一属性带来的卡顿风险，并着重指出cancelAnimationFrame在组件卸载、页面切换等生命周期节点中不可或缺的清理作用——真正决定动画流畅度的，往往不是帧率本身，而是对渲染原理的理解与对执行时机的精准把控。

requestAnimationFrame 什么时候该用，什么时候不该用

它不是万能的“高性能动画开关”，只适合需要和屏幕刷新率同步的连续视觉更新。比如滚动视差、Canvas 绘图、CSS transform 动画驱动、物理模拟等。如果只是做一次性的淡入（opacity 从 0 到 1）、或者状态切换（如菜单展开/收起），直接用 CSS 过渡（transition）更轻量，浏览器会自动优化到合成层，requestAnimationFrame 反而增加 JS 执行开销。

最简可用的 requestAnimationFrame 动画循环结构

核心是「递归调用 + 时间戳控制」，避免用 setInterval 或无条件 setTimeout。浏览器传入的时间戳（DOMHighResTimeStamp）是单调递增的毫秒数，比 Date.now() 更精准，也避免了系统时间被手动调整导致的跳帧。

let startTime = null;
const duration = 3000; // 动画总时长 3s
<p>function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1);</p><p>// 更新样式，例如平移
element.style.transform = <code>translateX(${progress * 200}px)</code>;</p><p>if (progress < 1) {
requestAnimationFrame(animate);
}
}</p><p>requestAnimationFrame(animate);</p>

• timestamp 是浏览器保证每帧唯一、高精度的时间值，别自己用 Date.now() 替代
• 必须在每次回调里检查是否完成（progress ），否则会无限递归调用
• 不要在 animate 里做 DOM 查询（如 document.querySelector），应提前缓存 element

和 CSS transition / @keyframes 冲突时的表现

如果元素同时被 requestAnimationFrame 修改 transform，又设置了 transition: transform 0.3s，浏览器会把 JS 修改视为“强制重排触发源”，可能打断过渡、导致卡顿或跳变。CSS 动画和 JS 驱动动画不能混用同一属性。

• 已用 requestAnimationFrame 控制 transform → 移除所有相关 transition 声明
• 想保留 CSS 过渡效果 → 改用 element.classList.add('animated') 触发 class 切换，完全交由 CSS 管理
• 调试时可打开 Chrome DevTools 的 “Rendering” 面板，勾选 “FPS Meter” 和 “Paint Flashing”，观察是否意外触发 layout/paint

cancelAnimationFrame 的必要性与常见遗漏点

页面卸载、组件销毁、或用户切到其他 tab 时，若没取消正在运行的 requestAnimationFrame，回调仍可能在后台排队执行（尤其在某些旧版 Safari 中），造成内存泄漏或错误访问已销毁的 DOM 节点。

• 保存 requestAnimationFrame 返回的 ID：const frameId = requestAnimationFrame(animate)
• 在合适时机调用 cancelAnimationFrame(frameId)，比如 beforeunload、React 的 useEffect cleanup、Vue 的 beforeUnmount
• 注意：cancelAnimationFrame 不会抛错，传入无效 ID 也无反应，所以不必 try/catch，但要确保变量作用域能访问到 ID

真正难的不是写对那几行 requestAnimationFrame 调用，而是判断它是否真的比 CSS 更合适，以及在组件生命周期里干净地启停。很多“掉帧”问题，根源不在帧率本身，而在反复读写布局属性、或在动画帧里做了重排操作。

本篇关于《requestAnimationFrame动画制作技巧详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！