JS动画核心是定时更新样式并依赖浏览器重绘，常用方式有：1.setTimeout/setInterval（基础但易掉帧）；2.requestAnimationFrame（推荐，60fps流畅节能）；3.其他高级库方案。
JavaScript 实现动画效果，核心是通过定时更新元素的样式属性（如 left、transform、opacity 等），再结合浏览器重绘机制呈现连续变化。而 CSS 动画与 JS 动画各有适用场景，选择关键看“控制力”、“性能”和“复杂度”。
JS 动画怎么实现？常用三种方式
1. setTimeout / setInterval：最基础，手动控制帧率（如每 16ms 执行一次），修改样式后触发重排/重绘。适合简单逻辑，但难以精准同步刷新率，易掉帧。
2. requestAnimationFrame（rAF）：推荐方式。浏览器在下一次重绘前调用回调，天然匹配屏幕刷新率（通常 60fps），节能且流畅。需手动计算进度、插值，并递归调用自身：
function animate(el, start, end, duration) {
const startTime = performance.now();
function step(timestamp) {
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1);
const value = start + (end - start) * easeInOutCubic(progress);
el.style.transform = `translateX(${value}px)`;
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
3. Web Animations API（WAAPI）：现代原生方案，支持时间轴控制（暂停、回放、速率调节）、事件监听（onfinish）、组合动画。语法更声明式，性能接近 CSS 动画：
立即学习“Java免费学习笔记（深入）”；
el.animate([
{ transform: 'scale(1)', opacity: 1 },
{ transform: 'scale(1.2)', opacity: 0.5 }
], {
duration: 300,
easing: 'ease-in-out',
fill: 'forwards'
});
CSS 动画适合什么情况？
✅ 适合纯视觉反馈类动效：按钮悬停、加载旋转、淡入淡出、卡片翻转等。
✅ 需要硬件加速时：对 transform 和 opacity 做动画，浏览器会启用 GPU 合成图层，性能极佳。
✅ 动画逻辑固定、无需运行时干预：用 @keyframes + animation 即可，代码简洁，维护成本低。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
❌ 不适合需要根据用户交互实时计算路径、响应滚动/拖拽位置、或依赖 DOM 尺寸动态调整的动画（比如跟随鼠标、视差滚动、SVG 路径动画）。
JS 动画更适合哪些需求？
✅ 需要精确控制播放状态：暂停、逆向播放、跳转到某一时间点、动态修改持续时间或缓动函数。
✅ 动画逻辑依赖运行时数据：比如根据鼠标坐标、滚动距离、API 返回值实时生成目标值；或多个元素联动（如拖拽排序中其他项的位移补偿）。
✅ 复杂时序编排：使用 gsap、Framer Motion 或 WAAPI 的 effect 组合，实现交错动画、序列动画、物理模拟（弹跳、惯性滑动）等。
✅ 需要动画完成后的 JS 回调做后续操作（如删除 DOM、发请求、切换状态），且要求高可靠性（CSS animationend 在中断或快速重复触发时可能丢失事件）。
怎么选？一个简单判断原则
• 如果动效是“预设好、不常变、不依赖交互数据”，优先用 CSS 动画或 transition —— 更轻量、更稳定、自动优化。
• 如果动效要“实时响应、精细控制、动态组合”，就用 requestAnimationFrame 或 WAAPI —— 灵活性和可控性不可替代。
• 第三方库（如 GSAP）在兼容性、功能丰富度、调试能力上优势明显，中大型项目值得引入；小项目或学习阶段，先掌握 rAF 和 WAAPI 足够。
