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;
function step(timestamp) {
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1);
const value = start + diff * progress;
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，会导致严重卡顿

动画的边界往往不在“怎么动”，而在“什么时候不动”——比如用户视线外的区域、交互空闲期、或设备性能受限时主动降级。这些逻辑比补间函数本身更影响体验。