当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript动画教程：requestAnimationFrame详解使用

JavaScript动画教程：requestAnimationFrame详解使用

2026-02-11 15:56:37 0浏览收藏

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JavaScript动画实现教程：requestAnimationFrame使用详解》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

requestAnimationFrame 是浏览器专为动画设计的调度机制，它在下一次重绘前调用函数，天然同步屏幕刷新率、不丢帧、页面不可见时自动暂停；而 setTimeout 无法稳定实现这些特性。

怎样用javascript实现动画效果_如何使用requestAnimationFrame【教程】

requestAnimationFrame 是什么，为什么不用 setTimeout

requestAnimationFrame 不是“更高级的定时器”，它是浏览器专为动画设计的调度机制：告诉浏览器“我下一帧要画点东西，请在下一次重绘前调用我的函数”。相比 setTimeout 或 setInterval，它天然同步屏幕刷新率（通常是 60Hz），不会丢帧，也不会在页面不可见时盲目执行——这些是手动用定时器很难稳定做到的。

常见错误现象包括：动画卡顿、滚动中突然跳变、切到其他标签页后 CPU 持续飙高。这些问题往往就出在用 setTimeout 硬凑 16ms 间隔上。

浏览器会自动优化调用时机，比如页面后台运行时暂停回调
回调函数接收一个时间戳参数（DOMHighResTimeStamp），精度远高于 Date.now()
必须手动递归调用才能持续动画：requestAnimationFrame(animate) 要写在函数体内
不支持直接传参，需用闭包或 bind，例如 requestAnimationFrame(animate.bind(null, element))

最简可用的 requestAnimationFrame 动画结构

一个能跑起来、不崩、可中断的基础骨架长这样：

let animationId = null;
<p>function animate(timestamp) {
// 你的绘制逻辑，比如更新元素 style.transform
element.style.transform = <code>translateX(${easeInOutCubic(timestamp - startTime) * 200}px)</code>;</p><p>// 继续下一帧（除非已到达终点）
if (timestamp - startTime < duration) {
animationId = requestAnimationFrame(animate);
}
}</p><p>function start() {
startTime = performance.now();
animationId = requestAnimationFrame(animate);
}</p><p>function stop() {
if (animationId) {
cancelAnimationFrame(animationId);
animationId = null;
}
}</p>

关键点：

用 performance.now() 记录起始时间，比 Date.now() 更准，且不受系统时间调整影响
动画状态（如 startTime、duration）不能只靠闭包捕获，要考虑多次调用冲突
必须保存 animationId，否则无法中途停止；忘记调 cancelAnimationFrame 会导致内存泄漏

和 CSS 动画比，JS 动画该用在哪儿

requestAnimationFrame 不是用来取代 transition 或 @keyframes 的。它的价值场景很具体：

动画参数实时变化：比如拖拽过程中跟随鼠标位置做弹性反馈
多元素协同运动需要精确时序控制（如粒子系统、canvas 路径动画）
需要根据滚动位置、视口交集等动态计算每一帧样式（IntersectionObserver + raf 组合常见）
做自定义缓动曲线，而 CSS 的 cubic-bezier() 表达不了（比如物理模拟中的阻尼衰减）

但要注意：直接操作 element.style.xxx 触发重排（layout）会严重拖慢性能。优先用可合成（composited）属性，例如 transform 和 opacity；避免读写交替（如先 offsetTop 再改 style.left），这会强制同步布局计算。

容易被忽略的兼容性与调试细节

requestAnimationFrame 在 IE10+、Edge 12+、Chrome 24+、Firefox 23+ 中原生支持，但老版本需要前缀：webkitRequestAnimationFrame、mozRequestAnimationFrame。不过现在基本可不处理——除非还要支持 IE9。

调试时真正有用的是浏览器的“Rendering”面板（Chrome DevTools > More Tools > Rendering），勾选 “FPS Meter” 和 “Paint Flashing”，能直观看到是否掉帧、哪些区域在频繁重绘。

不要用 console.log 打印帧时间，它本身就会干扰性能表现
移动端注意：部分安卓 WebView 对 requestAnimationFrame 调度不稳，建议加 fallback 到 setTimeout（仅限兜底，非默认路径）
如果动画依赖用户交互（如 scroll、mousemove），记得节流——不是每触发一次就 requestAnimationFrame，而是标记“需要更新”，在 raf 回调里统一处理

动画逻辑越靠近“纯计算 + 单次 DOM 写入”，就越不容易出问题。写多了就会发现，最难的从来不是怎么启动一帧，而是怎么干净利落地结束它。

到这里，我们也就讲完了《JavaScript动画教程：requestAnimationFrame详解使用》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！