JavaScript动画核心在于选择稳定可控的方案：优先用requestAnimationFrame递归调用、transform/opacity触发GPU加速、Animation API控制进度，避免强制重排与非合成属性。
JavaScript 实现动画效果，核心不在于“能不能做”，而在于“用哪种方式做更稳、更可控、更少掉帧”。直接上 setTimeout 或暴力改 style.left 很容易卡顿、失同步、难暂停——真正实用的方案得看场景和需求。
用 requestAnimationFrame 替代 setTimeout / setInterval
浏览器在每次重绘前会调用 requestAnimationFrame，它自动对齐屏幕刷新率（通常是 60fps），避免强制同步布局（layout thrashing）和丢帧。
- 不要写
setInterval(() => { elem.style.transform = `translateX(${x}px)` }, 16)—— 时间不准、可能跳帧、无法被浏览器优化 - 正确写法是递归调用：
function animate() { /* 更新状态 */; elem.style.transform = ...; requestAnimationFrame(animate); } - 注意：必须在动画逻辑里更新状态（如位置、透明度），不能只靠 CSS 变量或外部计时器驱动
- 兼容性没问题：
requestAnimationFrame在所有现代浏览器及 IE10+ 都支持
优先用 transform 和 opacity 触发 GPU 加速
CSS 动画属性中，只有部分能走合成层（compositor layer）。滥用 top、left、width 会频繁触发重排（reflow），严重拖慢性能。
- ✅ 安全高效：
transform: translateX()、transform: scale()、opacity - ❌ 高开销，慎用：
top、left、height、margin、background-position - 检查是否启用 GPU 加速：Chrome DevTools → Rendering → 勾选 “Paint flashing” 和 “FPS meter”，看动画区域是否绿色闪烁且帧率稳定在 55–60
需要暂停/控制进度？别手写状态机，用 Animation API 或轻量库
原生 Element.animate() 返回一个 Animation 对象，自带 play()、pause()、cancel()、currentTime，比自己维护 isRunning 标志靠谱得多。
立即学习“Java免费学习笔记（深入）”；
- 示例：
const anim = elem.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300 }); anim.pause(); - 注意：IE 不支持，如需兼容可加
web-animations-jspolyfill - 如果要复杂时间曲线（如弹跳、分段）、链式动画或与 React/Vue 生命周期深度集成，
GSAP（gsap.to()）仍是事实标准，体积可控（仅 ~12KB gzip） - 避免自己实现 easing 函数——用
cubic-bezier(.42,0,.58,1)或ease-in-out更省心
动画卡顿？先查是否触发了 layout 或 paint
即使用了 requestAnimationFrame 和 transform，仍可能卡——常见原因是无意中读取了布局属性（如 offsetTop、getBoundingClientRect()），导致浏览器强制同步计算样式和布局。
- 错误模式：
const pos = el.offsetTop; el.style.transform = `translateX(${pos + 10}px)`;—— 读 + 写 = 强制重排 - 修复方法：把读操作提前到帧开始时批量完成，写操作集中到
requestAnimationFrame回调末尾 - 用 Chrome DevTools 的 “Performance” 面板录制动画过程，重点关注 “Layout” 和 “Recalculate Style” 柱状图是否频繁出现
- 移动端尤其敏感：iOS Safari 对非合成属性的动画惩罚更重，务必用
will-change: transform提前声明（但别滥用）
真正难的不是让元素动起来，而是动得准、停得住、不抢主线程、不误触其他交互。很多“动画失效”问题，其实出在 CSS 层级、pointer-events、或者父容器 overflow: hidden 截断了 transform 效果——这些细节比写 JS 逻辑更容易被忽略。
