rAF 比定时器更适合动画，因其与屏幕刷新率同步、自动暂停、无需手动计算帧间隔；基础用法需递归调用，推荐使用时间戳控制进度；注意取消动画、避免强制重排、优先使用 transform/opacity，并可添加 polyfill 兼容旧浏览器。
用 requestAnimationFrame（简称 rAF）实现 JavaScript 动画，核心是让浏览器按自身刷新节奏驱动动画帧，避免 setTimeout 或 setInterval 的时间不可控问题，从而获得更流畅、更省电、更精准的视觉效果。
为什么 rAF 比定时器更适合动画？
rAF 会把回调函数安排在浏览器下一次重绘前执行，通常与屏幕刷新率（如 60Hz 对应 ~16.7ms/帧）同步。这意味着：
- 动画帧不会被丢弃或堆积，避免卡顿和跳帧
- 页面不可见时（如切换标签页），rAF 自动暂停，节省 CPU 和电量
- 无需手动计算帧间隔，浏览器自动优化调度
基础用法：一个最简动画循环
关键点是“递归调用”——在 rAF 回调里再次请求下一帧：
function animate() {
// 更新状态（比如位置、透明度）
element.style.transform = `translateX(${x}px)`;
<p>// 请求下一帧
requestAnimationFrame(animate);
}</p><p>// 启动动画
requestAnimationFrame(animate);
注意：不要用 setInterval(animate, 16) 模拟，它无法对齐刷新节奏，且不可暂停。
立即学习“Java免费学习笔记（深入）”；
带时间控制的动画（推荐）
rAF 回调会传入一个高精度时间戳（DOMHighResTimeStamp），可用于计算真实经过时间，让动画不受帧率波动影响：
let startTime = null;
const duration = 2000; // 动画总时长 2s
<p>function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1); // 归一化进度 [0, 1]</p><p>// 使用 progress 计算当前状态（线性、缓动等）
const x = progress * 300;
element.style.transform = <code>translateX(${x}px)</code>;</p><p>if (progress < 1) {
requestAnimationFrame(animate);
}
}</p><p>requestAnimationFrame(animate);
实际开发中的关键细节
停止动画要主动取消：保存 rAF 返回的 ID，用 cancelAnimationFrame(id) 中断循环，否则会持续占用资源。
避免在动画帧中强制重排（layout thrashing）：不要在循环里反复读取 offsetTop、getBoundingClientRect() 等触发回流的属性；可先批量读取，再批量写入。
结合 CSS 变换更高效：优先用 transform 和 opacity，它们能走合成层，不触发布局和绘制，性能最好。
需要兼容老浏览器？ 加一层 polyfill：
const rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) { return setTimeout(callback, 16); };
