前端相关动画库对比与实战指南：GSAP / Lottie / Swiper / AOS
这四个库几乎覆盖了前端 90% 常见的动画与交互场景，下面从定位、使用场景、优缺点、学习曲线等维度进行详细对比，并附上核心代码示例。
1. 四个库快速对比表
| 库名 | 主要用途 | 核心优势 | 主要劣势 | 文件大小 (min+gzip) | 学习曲线 | 流行度 | 典型场景 |
|---|---|---|---|---|---|---|---|
| GSAP | 任意 DOM/SVG/Canvas 高性能动画 | 功能最强大、时间线控制极强、生态完善 | 需要学习 API，入门稍陡 | ~35–45 KB | ★★★★☆ | ★★★★★ | 复杂交互、品牌站、H5 互动、滚动触发动画 |
| Lottie | 播放 After Effects 导出的 JSON 动画 | 设计感强、动效一致性高、跨平台 | 文件体积可能较大、性能不如 GSAP | ~60 KB + 动画 JSON | ★★☆☆☆ | ★★★★☆ | 引导页、图标动画、loading、品牌动效 |
| Swiper | 移动端/PC 端轮播图、滑动切换 | 开箱即用、移动端体验极好、功能丰富 | 轮播以外场景基本不用 | ~30–40 KB | ★☆☆☆☆ | ★★★★★ | 首页 banner、产品展示、卡片滑动 |
| AOS | 页面滚动时淡入/滑动/缩放等简单动画 | 零配置、使用最简单、纯 CSS 驱动 | 动画类型有限、自定义能力弱 | ~12 KB | ★☆☆☆☆ | ★★★★☆ | 营销页、文章页、长页面元素渐显 |
2. 详细说明与推荐使用场景
GSAP (GreenSock Animation Platform)
目前最强大的前端动画库，几乎是复杂动效的'工业标准'。
核心优势
- 极高的性能（硬件加速）
- 强大的时间线（Timeline）系统
- 支持 stagger、repeat、yoyo、ease、SVG 变形、CSS 变量、WebGL 等
- ScrollTrigger 插件（滚动触发）几乎成为事实标准
- 社区活跃，插件生态丰富
推荐场景
- 需要精致时间线编排的交互
- 滚动驱动的叙事型页面（storytelling）
- SVG 路径动画、文字逐字出现、复杂序列动画
- 品牌官网、H5 活动页、WebGL 结合
快速入门示例（含 ScrollTrigger）
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
< =>
