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 实现动画
关键不是“只调用一次”，而是“递归调用自己”，形成动画循环：
云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言，搭载自主研发的模块化引擎驱动技术，实现可视化拖拽无技术创建并管理网站！如你所想，无限可能，支持创建任何网站：企业、商城、O2O、门户、论坛、人才等一块儿搞定！永久免费授权，包括商业用途； 默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..
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 不是黑科技，但它是把动画从“能动”变成“真顺”的关键一步。用对了，不复杂，但容易忽略细节。
