JavaScript动画实现与requestAnimationFrame优势详解

本文深入解析了 JavaScript 动画的核心技术——requestAnimationFrame（rAF），揭示其作为浏览器原生 API 如何通过与屏幕刷新率精准同步、自动暂停后台动画、智能适配节电状态等机制，彻底克服 setTimeout 实现动画时存在的定时不准、后台耗电、丢帧闪烁等顽疾；文章不仅给出了简洁可靠的递归驱动范式和关键实践要点（如使用浏览器提供的时间戳、避免强制重排、合理终止条件），还厘清了 rAF 与 CSS 动画的分工边界——它不取代声明式 CSS 动画，而是赋能复杂交互场景（如物理模拟、滚动视差、Canvas 渲染）所需的动态控制力，同时提醒开发者重视动画取消、状态隔离与性能优化等易被忽视却至关重要的工程细节。

requestAnimationFrame 是什么，为什么比 setTimeout 更适合动画

requestAnimationFrame 是浏览器提供的原生 API，用于在下一次重绘前执行回调函数。它不是“自己控制帧率”，而是把动画逻辑交给浏览器调度——浏览器知道当前刷新率（比如 60Hz）、是否页面在后台、设备节电状态等，自动决定何时触发回调。

用 setTimeout 或 setInterval 模拟 60fps（即每 16.6ms 执行一次）看似可行，但实际会出问题：

• 定时器精度差：JS 事件循环可能被其他任务阻塞，导致回调延迟或堆积
• 页面不可见时仍运行：标签页切走后，setTimeout 还在跑，浪费 CPU 和电量
• 与屏幕刷新不同步：可能在两次重绘之间多次修改样式，造成丢帧或闪烁

requestAnimationFrame 天然规避这些——它只在浏览器准备重绘前调用，且页面隐藏时自动暂停。

最简可用的 requestAnimationFrame 动画写法

核心是「递归调用 + 状态更新」。不要把它当成一次性函数，而是一个持续驱动的循环入口。

let startTime = null;
const duration = 2000; // 动画总时长 2s
<p>function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1); // 归一化进度 [0, 1]</p><p>// 更新元素位置（示例：水平移动）
const element = document.getElementById('box');
element.style.transform = <code>translateX(${progress * 300}px)</code>;</p><p>if (progress < 1) {
requestAnimationFrame(animate); // 继续下一帧
}
}</p><p>// 启动
requestAnimationFrame(animate);</p>

注意点：

• 必须传入回调函数本身（requestAnimationFrame(animate)），不是 requestAnimationFrame(animate())
• 用 currentTime（由浏览器提供的时间戳）计算进度，而非依赖 Date.now()，更精准
• 手动控制结束条件（如 progress ），否则无限递归

requestAnimationFrame 在 CSS 动画和 JS 动画中的定位

它不替代 CSS @keyframes，而是补充那些 CSS 做不了的事：比如跟随鼠标实时计算路径、物理模拟（弹性、重力）、滚动视差、Canvas 绘图动画等。

关键区别：

• CSS 动画由渲染引擎直接优化，GPU 加速友好，性能上限高，但逻辑固定
• requestAnimationFrame 提供 JS 层控制权，可读取 DOM 尺寸、响应用户输入、动态调整参数，灵活性强但需小心性能

常见误用：用它反复设置 element.style.left/top 触发 layout → paint → composite 全流程。应优先用 transform 和 opacity，它们只触发 composite，更轻量。

容易被忽略的兼容性与清理问题

requestAnimationFrame 在现代浏览器中已无兼容问题（IE10+ 支持，且有成熟 polyfill），但两个细节常被跳过：

• 动画中途取消：保存返回的 ID，用 cancelAnimationFrame(id) 主动停止（比如组件卸载、用户交互中断）
• 多个动画共存时未隔离状态：每个动画应有独立的 startTime 和结束判断，避免互相干扰

例如，一个轮播组件切换时没 cancel 上一个 requestAnimationFrame，旧动画回调仍可能执行并覆盖新状态——这种竞态很难 debug。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript动画实现与requestAnimationFrame优势详解》文章吧，也可关注golang学习网公众号了解相关技术文章。