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 标志靠谱得多。
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。
立即学习“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 逻辑更容易被忽略。
