requestAnimationFrame 是浏览器原生的重绘调度器，按屏幕刷新率执行动画回调，比 setTimeout 更精准、节能、顺滑；它自动暂停非激活页面动画，避免丢帧和无效计算，且提供高精度时间戳用于帧率自适应动画。
requestAnimationFrame 是什么，为什么不用 setTimeout 做动画？
requestAnimationFrame 是浏览器提供的原生 API，用于在下一次重绘前执行动画回调。它不是定时器，而是“重绘调度器”——浏览器知道你打算做动画，会自动把回调塞进渲染流水线里，和屏幕刷新率（通常是 60Hz）对齐。
用 setTimeout 或 setInterval 模拟动画时，你无法控制回调实际执行时机：可能两次回调挤在同一帧，也可能跨帧丢帧，还可能在页面非激活状态（比如切到其他 tab）下继续执行，白耗 CPU。
而 requestAnimationFrame 自动暂停非可见页面的回调，且保证每次只调一次、紧贴刷新节奏，天然防抖、节能、顺滑。
怎么写一个基础的 requestAnimationFrame 动画循环？
核心是“递归调用 + 状态更新 + 条件退出”，不是一次性注册。常见错误是漏掉下一次调用，或没清空上一次 ID 导致失控。
立即学习“Java免费学习笔记（深入）”；
- 必须在回调函数末尾再次调用
requestAnimationFrame，否则只执行一帧 - 用返回值（一个数字 ID）配合
cancelAnimationFrame手动终止，比如用户点击暂停、元素移出视口 - 动画逻辑里别直接操作 DOM 样式，优先用
transform和opacity，避免触发重排（layout）
let animationId = null;
const element = document.getElementById('box');
let x = 0;
<p>function animate() {
x += 2;
if (x > 400) return; // 退出条件</p><p>element.style.transform = <code>translateX(${x}px)</code>;
animationId = requestAnimationFrame(animate); // 关键：递归调度
}</p><p>animationId = requestAnimationFrame(animate);</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10835" title="React 组件生成器"><img
src="https://img.php.cn/upload/skill/000/000/081/179336710290696.jpg" alt="React 组件生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10835" title="React 组件生成器">React 组件生成器</a>
<p>根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。</p>
</div>
<a href="/xiazai/skill10835" title="React 组件生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p>// 暂停时调用：
// cancelAnimationFrame(animationId);
// animationId = null;requestAnimationFrame 的时间戳参数有什么用？
回调函数默认接收一个高精度时间戳（单位毫秒，从页面加载开始），类型是 DOMHighResTimeStamp。它比 Date.now() 更准，且不受系统时间调整影响，适合做匀速、缓动、帧率自适应动画。
例如实现“每秒移动 100px”的匀速位移，不能靠帧数（因为帧率可能波动），而应基于时间差计算：
- 记录上一帧的时间戳
- 当前帧减去上一帧，得到真实经过的毫秒数
- 用这个 delta 计算本次该走多远：
distance = speed * (delta / 1000)
let lastTime = 0;
const speed = 100; // px/s
<p>function animate(time) {
if (!lastTime) lastTime = time;
const delta = time - lastTime;
lastTime = time;</p><p>const moveX = (speed * delta) / 1000;
element.style.transform = <code>translateX(${x + moveX}px)</code>;</p><p>requestAnimationFrame(animate);
}</p><p>requestAnimationFrame(animate);兼容性与常见陷阱
requestAnimationFrame 在现代浏览器中已全覆盖（包括 iOS Safari 6.1+、Android Browser 4.4+），但旧安卓 WebView 或 IE9- 需要 polyfill。不过现在基本不用考虑了。
真正容易踩的坑是：在动画中频繁读取 offsetTop、getBoundingClientRect() 这类会强制同步触发重排的属性。哪怕只读一次，也可能打断浏览器的渲染优化，导致卡顿。
还有就是忘记清理。比如组件卸载、路由跳转后，如果 requestAnimationFrame 还在跑，就会持续占用资源，甚至引发内存泄漏——尤其在 React/Vue 等框架里，务必在销毁钩子中调用 cancelAnimationFrame。
时间戳不是万能的。如果动画逻辑本身很重（比如大量计算或 DOM 操作），哪怕用了 requestAnimationFrame，依然会掉帧。这时候得拆逻辑、用 Web Worker，或者改用 CSS 动画。
