JavaScript 动画本质是连续快速更新样式以产生动态错觉，推荐使用 requestAnimationFrame（rAF）实现，因其与屏幕刷新同步、后台自动暂停、适配多设备刷新率且避免布局抖动。
JavaScript 中的动画本质是连续快速地更新元素的样式（比如位置、透明度、缩放等），让肉眼产生“动起来”的错觉。实现方式有多种，但 requestAnimationFrame（简称 rAF）是现代 浏览器 推荐的、最高效且与屏幕刷新节奏同步的方案。
基础动画原理：靠定时器也能动，但不推荐
过去常用 setTimeout 或 setInterval 每隔几毫秒修改一次样式，例如：
let left = 0;
setInterval(() => {
left += 2;
document.getElementById(‘box’).style.left = left + ‘px’;
}, 16); // 约 60fps
立即学习“Java 免费学习笔记（深入）”；
问题在于：它不关心浏览器是否准备就绪，可能在帧中间触发、造成丢帧或卡顿；页面不可见时仍执行，浪费资源；时间间隔难精准匹配刷新率（如 16.67ms）。
requestAnimationFrame 的核心优势
rAF 让动画“听从浏览器安排”，由系统在下一次 重绘 前自动调用 回调函数，天然对齐屏幕刷新节奏（通常是 60Hz），还具备以下特点：
- 页面后台 / 标签页不可见时自动暂停，省电省性能
- 自动适配不同设备的刷新率（比如 iPad Pro 120Hz）
- 比 setTimeout 更顺滑，避免强制同步布局（layout thrashing）
如何正确使用 requestAnimationFrame 实现动画
关键不是“只调用一次”，而是“递归调用自己”，形成动画循环：
function animate() {
// 1. 更新状态（如位置、角度）
position += velocity;
// 2. 应用到 DOM（尽量只改 transform / opacity）
el.style.transform = `translateX(${position}px)`;
// 3. 请求下一帧
requestAnimationFrame(animate);
}
requestAnimationFrame(animate); // 启动
注意几个实用细节：
- 把计算逻辑（如物理模拟）放在回调开头，渲染操作放后面
- 优先用
transform和opacity触发 GPU 加速，避免触发布局（left/top/width/height） - 需要控制速度时，别硬写固定增量，而是基于时间差做匀速 / 缓动：用
performance.now()记录上一帧时间，算出 deltaT - 动画结束时记得停止——保存 rAF 返回的 ID，用
cancelAnimationFrame(id)清理
结合时间戳做精准帧控（推荐进阶写法）
下面是一个带时间控制的平滑移动示例：
let startTime = null;
const duration = 2000; // 动画总时长 2s
const from = 0, to = 300;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp – startTime;
const progress = Math.min(elapsed / duration, 1);
const currentPos = from + (to – from) * easeOutQuad(progress);
el.style.transform = `translateX(${currentPos}px)`;
if (progress requestAnimationFrame(animate);
}
}
// 缓动函数示例
function easeOutQuad(t) {return t * (2 – t); }
requestAnimationFrame(animate);
这样写能保证动画严格按时间走，不受帧率波动影响，即使某帧卡住，后续也会自动追帧或收尾。
基本上就这些。requestAnimationFrame 不是黑科技，但它是把动画从“能动”变成“真顺”的关键一步。用对了，不复杂，但容易忽略细节。
以上就是
