requestAnimationFrame 比 setTimeout 更适合动画，因其自动对齐屏幕刷新率（如60Hz），避免丢帧卡顿；setTimeout 时机不可控，易累积误差、触发重排抖动，后台或高负载时掉帧明显；且 requestAnimationFrame 在标签页不可见时自动暂停，节省资源。
requestAnimationFrame 为什么比 setTimeout 更适合动画
因为 requestAnimationFrame 会自动对齐屏幕刷新率（通常是 60Hz），避免丢帧和卡顿；而 setTimeout 的执行时机不可控，容易累积误差、触发重排抖动，尤其在页面后台或 CPU 压力大时掉帧明显。
浏览器还可能在标签页不可见时暂停 requestAnimationFrame，节省资源——这是默认优化，不用手动处理。
- 它不接受毫秒参数，只传一个时间戳（
DOMHighResTimeStamp），单位是毫秒但精度可达微秒级 - 必须在每次回调里主动调用下一次
requestAnimationFrame，否则动画只执行一帧 - 不要在回调里做大量计算或 DOM 写操作，否则拖慢渲染帧率
最简可用的 requestAnimationFrame 动画循环
下面这段代码让一个 <div id="box"> 水平匀速移动到 400px：
let start = null;
const box = document.getElementById('box');
const duration = 2000; // 动画总时长 2s
<p>function animate(timestamp) {
if (!start) start = timestamp;
const progress = Math.min((timestamp - start) / duration, 1);
box.style.transform = <code>translateX(${progress * 400}px)</code>;</p><p>if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);注意：timestamp 是高精度时间戳，不是 Date.now()；progress 用 Math.min 防止超调；动画结束时不继续调用 requestAnimationFrame，避免无谓循环。
立即学习“Java免费学习笔记（深入）”；
如何实现 easing 缓动效果
直接线性运动生硬。要加缓动，只需把 progress 输入进一个缓动函数，输出调整后的进度值。比如 ease-in-out：
function easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}然后替换原逻辑中的 progress：
const eased = easeInOutCubic(progress);
box.style.transform = `translateX(${eased * 400}px)`;- 别手写复杂缓动公式，用现成库如
ts-easing或直接抄 easings.net 的 JS 版本 - CSS
transition也支持cubic-bezier()，但 JS 控制更适合需要动态中断、变速或联动的场景 - 缓动函数输入范围必须是 [0, 1]，输出也应保持在 [0, 1]，否则动画会反向或超限
动画中途暂停、取消和重新开始的正确姿势
requestAnimationFrame 本身没有暂停机制，靠控制是否继续调用实现。关键是要保存当前状态（位置、起始时间、是否暂停）：
- 用一个
let animationId = null存储当前帧 ID，调用cancelAnimationFrame(animationId)中断 - 暂停时记录
lastTimestamp和当前progress，恢复时用新timestamp减去已耗时，算出剩余时间 - 不要在暂停后立刻再调
requestAnimationFrame，等用户点击“继续”才启动 - 如果动画依赖外部数据（比如鼠标位置），确保回调里读取的是最新值，而不是闭包里冻结的老值
真正难的不是启停逻辑，而是状态同步：DOM 位置、JS 进度变量、动画时间轴三者必须始终一致，稍有错位就会跳变。这点很容易被忽略。
