掌握gsap和web animations api可实现高性能动画。1. gsap支持复杂时间轴、滚动触发，适合精细控制；2. 原生web animations api轻量高效，适用于现代项目；3. 优先使用transform和opacity优化性能。
JavaScript 高级动画编程能让你创建流畅、高性能且交互性强的动画效果。相比传统的 CSS 动画或 setInterval，使用 GSAP 或 Web Animations API 可以更精细地控制时间轴、缓动、回放和响应用户行为。下面介绍如何高效使用这两种主流方案。
使用 GSAP（GreenSock Animation Platform）
GSAP 是目前最强大的 JavaScript 动画库之一，适合复杂动画场景，比如交错动画、滚动触发动画、可逆时间轴等。
优点： 兼容性好、性能优异、API 直观、支持 SVG 和 3D 变换。
● 安装与引入通过 CDN 引入：
立即学习“Java免费学习笔记（深入）”；
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>● 基础动画示例
移动一个元素并旋转：
gsap.to(".box", {
x: 300,
rotation: 360,
duration: 1.5,
ease: "power2.out"
});
● 使用时间轴（Timeline）编排动画
将多个动画按顺序或重叠执行：
const tl = gsap.timeline();
tl.to(".box1", { x: 100, duration: 1 })
.to(".box2", { y: -50, duration: 0.8 }, "-=0.5") // 与上一个动画后0.5秒重叠
.to(".box3", { scale: 1.5, duration: 1 });
● 触发滚动动画（结合 ScrollTrigger）
需额外引入 ScrollTrigger 插件：
gsap.registerPlugin(ScrollTrigger);
gsap.to(".fade-in", {
opacity: 1,
y: -20,
duration: 1,
scrollTrigger: {
trigger: ".fade-in",
start: "top 80%",
end: "bottom 20%",
toggleActions: "play none none reverse"
}
});
使用 Web Animations API（原生 JavaScript）
Web Animations API 是浏览器原生支持的动画接口，无需引入库，适合轻量或现代项目。
优点： 原生、无依赖、可直接操作动画对象。
● 基本动画语法让一个元素平移并渐显：
document.querySelector(".box").animate(
[
{ transform: 'translateX(0)', opacity: 0 },
{ transform: 'translateX(200px)', opacity: 1 }
],
{
duration: 1000,
easing: 'ease-out',
fill: 'forwards'
}
);
● 控制动画播放状态
获取动画实例以暂停、恢复或反向播放：
const anim = element.animate(keyframes, timing); anim.pause(); anim.play(); anim.reverse();● 创建关键帧动画并动态调整
可以随时修改动画进度：
anim.currentTime = 500; // 跳转到500ms处 anim.playbackRate = 2; // 加速播放
选择建议与性能优化
根据项目需求决定使用哪种方式：
- 需要复杂时间轴、滚动动画、SVG 动画 → 推荐 GSAP
- 追求轻量、现代浏览器支持、减少依赖 → 使用 Web Animations API
- 动画频繁触发或涉及大量元素 → 避免操作 layout 属性（如 width/height），优先使用
transform和opacity - 始终启用硬件加速：在 GSAP 中自动处理，在原生中可加
will-change: transform
基本上就这些。掌握 GSAP 的时间轴思维和 Web Animations API 的原生控制能力，就能应对大多数高级动画需求。
