requestAnimationFrame 是最可控的原生动画方案，按屏幕刷新率调度、自动暂停于后台，需递归调用并用 performance.now() 计算真实时间，优先使用 transform/opacity 避免重排。
用 requestAnimationFrame 写原生动画最可控
浏览器原生支持的 requestAnimationFrame 是实现平滑动画的底层基础，比 setTimeout 或 setInterval 更精准、更省电。它会按屏幕刷新率（通常是 60fps）自动调度回调，且在标签页不可见时自动暂停。
常见错误是直接用 setTimeout 控制帧率，结果在高刷屏或后台标签中表现异常；或者手动计算时间差却忽略掉首帧延迟，导致动画起始卡顿。
- 每次动画循环必须用
requestAnimationFrame递归调用自身，不能只调一次 - 用
performance.now()计算真实经过时间，别依赖帧数假设 - 修改样式优先用
transform和opacity，避免触发重排（layout）
function animate(el, start, end, duration = 300) {
const startTime = performance.now();
const diff = end - start;
<p>function step(timestamp) {
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1);
const value = start + diff * progress;</p><pre class='brush:php;toolbar:false;'>el.style.transform = `translateX(${value}px)`;
if (progress < 1) {
requestAnimationFrame(step);
}} requestAnimationFrame(step); }
GSAP 是复杂交互动画的首选库
当需要精确控制时间轴、缓动曲线、序列、反转、暂停或与 ScrollTrigger 深度联动时，GSAP（GreenSock Animation Platform）仍是目前最成熟的选择。它不依赖 DOM 结构，可动画 CSS 属性、SVG、Canvas、甚至自定义 JS 对象。
容易踩的坑：直接引入完整版 gsap/all 会显著增大包体积；误用 to() 多次覆盖同一属性导致意外覆盖；在 React 中未正确清理动画实例引发内存泄漏。
立即学习“Java免费学习笔记（深入）”；
- 按需导入：用
gsap/core+ 单独插件（如ScrollTrigger），而非全量gsap/all - React 中用
useEffect返回清理函数，调用animation.kill()或ScrollTrigger.kill() - 避免在循环中反复创建新动画，复用
gsap.timeline()实例更高效
动画库选型要看具体场景和打包约束
没有“最好”的库，只有“最合适”的工具。轻量级页面交互动画（比如按钮 hover、卡片展开）用原生或 Framer Motion 更合适；需要兼容 IE 的老项目可能还得靠 anime.js；而纯数据可视化动画往往直接用 D3.js 的过渡系统更自然。
注意几个关键差异点：
-
Framer Motion深度绑定 React 生命周期，提供layout动画和拖拽等开箱能力，但 SSR 支持需额外配置 -
anime.js体积小（约 15KB gzipped）、API 简洁，适合快速原型，但时间轴控制弱于 GSAP -
Popmotion已停止维护，不建议新项目使用；Mo.js偏向粒子/图形特效，通用性低 - 现代 CSS
@keyframes+transition能覆盖 70% 的简单状态切换，别一上来就上 JS 动画
性能问题常出在“看不见”的地方
动画卡顿很少因为帧率不够，更多源于强制同步布局（forced synchronous layout）或频繁重绘。比如在动画帧里读取 offsetTop、getBoundingClientRect()，会触发浏览器立即计算样式和布局。
另一个易忽略点是动画元素未启用硬件加速。虽然 transform: translateZ(0) 曾是常用 hack，但现在更推荐只对真正需要的元素加 will-change: transform，且用完及时移除——滥用反而增加内存开销。
- 把读取布局的操作（如尺寸、位置）提到动画循环外，或用
ResizeObserver/IntersectionObserver替代轮询 - 用 Chrome DevTools 的
Rendering面板开启Paint Flashing和Layout Shift Regions直观定位重绘/重排 - 移动端尤其注意：
touch-action: none可能阻断默认滚动，但若动画同时监听touchmove又没preventDefault，会导致严重卡顿
动画的边界往往不在“怎么动”，而在“什么时候不动”——比如用户视线外的区域、交互空闲期、或设备性能受限时主动降级。这些逻辑比补间函数本身更影响体验。
