JavaScript动画应使用requestAnimationFrame而非setTimeout/setInterval，因其自动对齐屏幕刷新率、后台暂停、统一调度；需递归调用并设停止条件，配合transform/opacity等GPU加速属性及缓动函数实现高性能动画。
JavaScript 构建简单动画，核心不是靠 setTimeout 硬拖帧，而是用 requestAnimationFrame —— 它由浏览器调度，更顺滑、更省电、自动节流。
为什么不用 setInterval 或 setTimeout 做动画
它们不感知屏幕刷新节奏，容易丢帧或卡顿；在页面后台时仍运行，浪费资源；时间间隔难精准匹配 60fps（约 16.6ms/帧）。
-
requestAnimationFrame自动对齐显示器刷新率（通常是 60Hz），实际帧率可能更高或更低，但始终“该画才画” - 页面不可见时自动暂停，恢复可见后继续，无需手动控制
- 多个动画共存时，浏览器统一调度，避免互相抢占主线程
requestAnimationFrame 的基本写法和循环控制
它只执行一次，想持续动画必须在回调里递归调用自己。别忘了加停止条件，否则无限执行。
function animate() {
// 更新元素位置/透明度/旋转等
element.style.transform = `translateX(${x}px)`;
<p>// 下一帧继续
if (x < 400) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);- 不要写成
requestAnimationFrame(animate())（带括号是立即执行） - 用
cancelAnimationFrame(id)可中途终止，requestAnimationFrame返回一个 ID，需提前保存 - 动画逻辑尽量轻量，避免在帧回调里做 DOM 查询、复杂计算或触发重排
配合 CSS transform 和 opacity 实现高性能动画
直接改 left、top 或 width 会触发 Layout（布局重排），开销大；而 transform 和 opacity 属于合成层属性，走 GPU 加速路径。
立即学习“Java免费学习笔记（深入）”；
- 优先用
transform: translateX()替代left，用transform: scale()替代width/height - 避免同时读写样式（如先
offsetLeft再改style.left），会强制同步 Layout - 如果动画元素内容不变，可加
will-change: transform提前提示浏览器提升图层（但别滥用）
简单缓动效果怎么加（不用库）
线性运动太机械，加个 ease-in-out 就自然得多。用时间比例 t（0→1）套入缓动函数即可，不需要完整贝塞尔曲线。
function easeInOut(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
<p>function animate() {
const progress = Math.min(elapsedTime / duration, 1);
const eased = easeInOut(progress);
element.style.transform = <code>translateX(${eased * 300}px)</code>;
if (progress < 1) requestAnimationFrame(animate);
}- 时间计算建议用
performance.now()，比Date.now()更精确（微秒级） - 别在每次
requestAnimationFrame回调里重新计算起始时间，应在动画启动时记录一次startTime - 缓动函数返回值范围必须是 [0, 1]，否则位移会超界或反向
真正难的不是让东西动起来，而是动得准、动得省、动得可控——比如暂停/恢复、动态调整持续时间、与用户交互（如 hover 中断）无缝衔接。这些细节没封装好，再“简单”的动画也会在真实项目里露馅。
