requestAnimationFrame 是实现流畅动画的最优选择，它与屏幕刷新率同步、节省资源且避免丢帧；应配合 transform 和 will-change 提升性能，避免直接修改 left/top 触发布局。
在 JavaScript 中实现流畅动画，requestAnimationFrame 是比 setTimeout 或 setInterval 更优的选择——它由浏览器统一调度，与屏幕刷新率同步（通常 60fps），节省资源且避免丢帧。
requestAnimationFrame 的基本用法
它接收一个回调函数，该函数会在下一次浏览器重绘前执行。和 setTimeout 不同，它不接受毫秒参数，而是“交给浏览器决定何时执行”：
示例：让一个 div 水平移动
const box = document.getElementById('box');
let left = 0;
function animate() {
left += 2;
box.style.left = left + 'px';
// 继续下一帧，直到停止条件满足
if (left < 400) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate); // 启动动画
为什么不能直接用 setInterval？
setInterval(animate, 16) 看似模拟 60fps，但存在几个问题：
立即学习“Java免费学习笔记（深入）”；
- 定时器触发时间不精确，可能与屏幕刷新不同步，导致卡顿或跳帧
- 页面切到后台时，
setInterval仍运行（部分浏览器会降频，但不可靠），浪费 CPU -
requestAnimationFrame在标签页不可见时自动暂停，恢复时继续，更省电、更友好
封装可控制的动画函数
实际开发中，常需启动、暂停、取消动画。可以封装一个基础控制器：
class AnimationFrame {
constructor(callback) {
this.callback = callback;
this.id = null;
}
start() {
if (this.id !== null) return;
const loop = () => {
this.callback();
this.id = requestAnimationFrame(loop);
};
this.id = requestAnimationFrame(loop);
}
stop() {
if (this.id !== null) {
cancelAnimationFrame(this.id);
this.id = null;
}
}
}
// 使用
const anim = new AnimationFrame(() => {
// 动画逻辑，比如更新 transform、opacity 等
});
anim.start();
// anim.stop();
配合 CSS transform 和 will-change 提升性能
纯 JS 修改 left/top 触发布局（layout）和绘制（paint），开销大。推荐：
- 用
transform: translateX()替代left—— 只触发合成（composite），GPU 加速 - 对频繁动画元素加
style.willChange = 'transform'（谨慎使用，仅对确实需要的元素） - 优先使用
opacity动画，也是合成层友好属性
