必须用 requestAnimationFrame 而不是 setTimeout，因其由浏览器调度、对齐刷新率、页面不可见时自动暂停；setTimeout 受主线程阻塞影响易卡顿跳帧。
JavaScript 实现动画效果，核心不是靠“写教程”，而是选对机制、避开重排陷阱、控制好时间精度。用 setTimeout 硬拖帧容易掉帧；用 setInterval 更糟——它不感知绘制时机；真正靠谱的是 requestAnimationFrame（简称 rAF）。
为什么必须用 requestAnimationFrame 而不是 setTimeout
rAF 由浏览器调度，自动对齐屏幕刷新率（通常是 60Hz），且在页面不可见时暂停调用，省资源。而 setTimeout(fn, 16) 只是“尽量每 16ms 调一次”，实际执行受 JS 主线程阻塞、任务队列延迟影响，极易卡顿或跳帧。
常见错误现象：setTimeout 动画在滚动或 CPU 占用高时明显卡顿，甚至累积延迟导致“瞬移”。
- 使用场景：所有需要平滑视觉过渡的 DOM 动画（如位移、缩放、透明度变化）
- 性能影响：rAF 触发时若 JS 执行过久，会直接丢帧；务必把计算逻辑精简，避免在 rAF 回调里做 DOM 查询或复杂运算
- 兼容性：IE10+ 支持；老版本需用
window.msRequestAnimationFrame或降级为setTimeout（仅作保底）
如何用 requestAnimationFrame 写一个基础位移动画
关键不是“启动”，而是“控制生命周期”——要能暂停、停止、响应速度变化。下面是一个可中断的左移动画示例：
立即学习“Java免费学习笔记（深入）”；
function animateLeft(element, from, to, duration = 300) {
const start = performance.now();
const distance = to - from;
function step(timestamp) {
const elapsed = timestamp - start;
const progress = Math.min(elapsed / duration, 1);
const current = from + distance * progress;
element.style.transform = `translateX(${current}px)`;
if (progress < 1) {
element.__animationId = requestAnimationFrame(step);
} else {
element.__animationId = null;
}
}
element.__animationId = requestAnimationFrame(step);
}
// 停止动画
function stopAnimation(element) {
if (element.animationId) {
cancelAnimationFrame(element.animationId);
element.__animationId = null;
}
}
注意点：
- 用
performance.now()而非Date.now()，精度更高（微秒级） - 不要用
element.style.left—— 它触发重排；优先用transform（GPU 加速，不重排） - 手动保存
__animationId是为了外部可控；实际项目建议封装成类或用 AbortController 模式
CSS 动画 vs JavaScript 动画：什么时候该换方案？
如果只是简单入场/悬停反馈，transition 或 @keyframes 更轻量、更稳定，浏览器优化充分。JS 动画真正必要时只有几种情况：
- 需要动态计算终点（比如鼠标跟随、物理模拟）
- 动画过程要响应用户交互（拖拽中实时更新进度）
- 需要精确控制每一帧（例如逐帧播放 SVG 路径动画）
- 要链式调用多个不同持续时间/缓动的动画段
混淆点：很多人以为“JS 能做 CSS 做不到的事”，其实大部分 UI 动画 CSS 都能覆盖；JS 的优势在于**过程可控性**，而非“能不能做”。滥用 JS 动画反而增加主线程负担。
容易被忽略的细节：缓动函数和帧间差值
rAF 每帧时间间隔并不严格等于 16.67ms，尤其在高刷屏（120Hz）或低负载设备上。直接用线性插值 t 会导致速度不一致。正确做法是基于真实经过时间计算进度：
错误写法：progress = frameCount * 16.67 / duration（假设固定帧率）
正确写法：progress = Math.min((timestamp - start) / duration, 1)（上面示例已采用）
另外，缓动函数别手写 easeInOutCubic 这类公式——容易出错。推荐直接用 css-easing 库，或从 timing-functions 中复制标准实现。自定义缓动时，务必保证函数在 t=0 和 t=1 处导数为 0（避免突兀启停）。