requestAnimationFrame是浏览器专为动画设计的API，比setTimeout/setInterval更精准省电，按屏幕刷新率自动调度；需用布尔变量控制启停，推荐基于时间戳计算位移实现匀速动画。
JavaScript 动画的核心在于**平滑、高效地更新画面**，而 requestAnimationFrame（简称 rAF）正是浏览器专门为动画设计的 API。它比 setTimeout 或 setInterval 更精准、更省电、更契合浏览器刷新机制（通常 60fps），是现代 Web 动画的首选方式。
requestAnimationFrame 的基本用法
rAF 接收一个回调函数，该函数会在**浏览器下一次重绘前**被调用。它会自动根据屏幕刷新率调整执行节奏（如 60Hz 屏幕约每 16.7ms 一次），无需手动计算时间间隔。
简单示例：让一个 div 水平移动
let box = document.getElementById('box');
let left = 0;
<p>function animate() {
left += 2;
box.style.left = left + 'px';</p><p>// 继续下一帧
requestAnimationFrame(animate);
}</p><p>// 启动动画
requestAnimationFrame(animate);</p>如何控制动画启停与暂停
rAF 本身不提供暂停/取消功能，需配合变量和逻辑控制：
立即学习“Java免费学习笔记（深入）”；
- 用布尔值（如
isRunning）标记是否继续执行 - 停止时不再调用
requestAnimationFrame，自然中断循环 - 不需要“清除 ID”，rAF 没有类似
clearTimeout的配套方法
let isRunning = true;
let left = 0;
<p>function animate() {
if (!isRunning) return; // 提前退出</p><p>left += 2;
box.style.left = left + 'px';</p><p>requestAnimationFrame(animate);
}</p><p>// 开始
requestAnimationFrame(animate);</p><p>// 停止
isRunning = false;</p>实现基于时间的匀速动画（推荐）
上面例子中直接加固定值会导致速度受帧率影响（如卡顿时变慢）。更健壮的做法是**根据时间差计算位移**：
- rAF 回调会传入一个高精度时间戳（DOMHighResTimeStamp）
let lastTime = 0;
const speed = 100; // px/s
<p>function animate(time) {
if (!lastTime) lastTime = time;
const deltaTime = (time - lastTime) / 1000; // 秒为单位
lastTime = time;</p><p>left += speed * deltaTime;
box.style.left = left + 'px';</p><p>requestAnimationFrame(animate);
}</p><p>requestAnimationFrame(animate);</p>结合 CSS transform 提升性能
直接修改 left/top 会触发 Layout 和 Paint，开销大。推荐用 transform: translateX()，它只触发合成（Composite），由 GPU 加速：
- 把
box.style.left = ...换成box.style.transform = 'translateX(' + left + 'px)' - 确保元素有 will-change: transform 或启用硬件加速（如
transform: translateZ(0)）可进一步优化
基本上就这些。rAF 不复杂但容易忽略时间控制和渲染优化，掌握这几点就能写出流畅、可维护的 JS 动画。
