第1章动画库概览

动画库概览：主流动画库介绍与选型指南

大家好，欢迎来到这门《动画库源码分析与改造》课程。

我是你们的前端老司机。说实话，做了这么多年动画，踩过的坑比写过的代码还多。今天咱们先不急着写代码，先聊聊市面上那些主流动画库，看看它们各自有什么本事。

为什么需要动画库？

你想想看，原生 CSS 动画虽然好用，但遇到复杂的时间线、交互联动，代码量就爆炸了。我早期做 H5 活动页时，用原生 CSS 写一个「卡片翻转 + 粒子散落」的效果，写了 300 多行 CSS，还一堆兼容性问题。后来换成 GSAP，30 行搞定。

这就是动画库的价值——把复杂的时间控制、缓动函数、性能优化都封装好了，你只管描述「做什么」，不用操心「怎么做」。

主流动画库逐个看

1. GSAP（GreenSock Animation Platform）

GSAP 是我个人最常用的库。它诞生于 Flash 时代，后来完美过渡到 JavaScript。说白了，它就是动画界的「老大哥」。

核心特点：

性能极强，60fps 稳稳的
时间线（Timeline）控制精准到毫秒
插件生态丰富（ScrollTrigger、MotionPath 等）
兼容性极好，IE9 都支持

我在项目中遇到过最典型的场景：一个品牌官网需要做「视差滚动 + 元素依次入场 + 循环呼吸动画」。用 GSAP 的 ScrollTrigger 插件，配合时间线，两天就搞定了。如果用原生写，至少一周。

// GSAP 基础用法
gsap.to('.box', {
  x: 300,
  rotation: 360,
  duration: 2,
  ease: 'power2.out'
});

// 时间线示例
const tl = gsap.timeline();
tl.to('.box1', { x: 200, duration: 1 })
  .to('.box2', { x: 200, duration: 1 }, '-=0.5')
  .to('.box3', { x: 200, duration: 1 });

我的小建议：GSAP 的学习曲线稍微陡一点，但一旦掌握了 Timeline 和缓动函数，你会发现它几乎能搞定任何动画需求。适合大型项目、复杂交互。

2. Anime.js

Anime.js 是轻量级选手。它的 API 设计非常优雅，代码写起来像在写诗。

核心特点：

体积小（约 15KB gzip）
API 简洁直观
支持 SVG 动画、CSS 属性、JS 对象
内置时间线功能

我记得有一次做个人项目，需要给 SVG 图标做「路径描边动画」。用 Anime.js 只需要几行代码，而且效果丝滑。GSAP 也能做，但 Anime.js 的写法更符合直觉。

// Anime.js 基础用法
anime({
  targets: '.circle',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FF6B6B',
  duration: 2000,
  easing: 'easeInOutQuad'
});

// SVG 路径动画
anime({
  targets: '.path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  direction: 'alternate',
  loop: true
});

注意：Anime.js 的维护频率不如 GSAP 高。如果你要做生产级项目，建议先看看社区活跃度。我曾经在一个中型项目里用了 Anime.js，结果遇到一个奇怪的 bug，查了两天才发现是库版本问题。

3. Lottie

Lottie 不是传统意义上的动画库，它是一个「播放器」。设计师用 After Effects 做好动画，导出为 JSON 文件，前端直接用 Lottie 播放。

核心特点：

设计师友好，AE 动画直接导出
文件体积小（相比视频/GIF）
支持交互控制（播放、暂停、跳转）
跨平台（Web、iOS、Android）

嗯，这里要注意：Lottie 适合「复杂视觉动画」，比如加载动画、引导页、品牌展示。但不适合「交互驱动的动画」，比如拖拽、滚动联动。

// Lottie 基础用法
import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('anim-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // AE 导出的 JSON 文件
});

// 控制播放
animation.play();
animation.pause();
animation.goToAndStop(30, true);

避坑指南：我曾经遇到设计师导出的 JSON 文件太大（超过 5MB），导致页面加载卡顿。后来我们约定：复杂动画控制在 3 秒以内，导出时压缩图层数量。Lottie 虽好，但别滥用。

4. Framer Motion

Framer Motion 是 React 生态里的动画库。如果你用 React 做项目，它几乎是首选。

核心特点：

声明式 API，与 React 完美融合
支持 AnimatePresence（进出场动画）
手势交互（拖拽、悬停、点击）
布局动画（自动计算位置变化）

我个人习惯在 React 项目里用 Framer Motion。它的 motion.div 组件用起来太顺手了，尤其是做列表进出场动画，AnimatePresence 帮你处理了所有「元素消失」的过渡逻辑。

// Framer Motion 基础用法
import { motion, AnimatePresence } from 'framer-motion';

function MyComponent({ isVisible }) {
  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.3 }}
        >
          内容区域
        </motion.div>
      )}
    </AnimatePresence>
  );
}

注意：Framer Motion 只适用于 React。如果你用 Vue 或原生 JS，可以考虑 VueUse 的 useMotion 或者直接上 GSAP。别为了一个动画库强行换框架。

动画库选型对比

选型这事儿，说白了就是「看场景下菜碟」。我整理了一张对比表，方便你快速决策：

维度	GSAP	Anime.js	Lottie	Framer Motion
体积	较大（~30KB）	较小（~15KB）	中等（~20KB）	较大（~35KB）
学习曲线	中等	低	低	低（React 用户）
性能	极优	良好	良好	良好
复杂时间线	★★★★★	★★★☆☆	★★☆☆☆	★★★★☆
SVG 动画	★★★★★	★★★★★	★★★★☆	★★★☆☆
交互驱动	★★★★★	★★★☆☆	★★☆☆☆	★★★★★
设计师协作	★★☆☆☆	★★☆☆☆	★★★★★	★★☆☆☆
框架绑定	无	无	无	React

我的选型建议：

大型项目、复杂交互 → GSAP（稳如老狗）
轻量级、SVG 动画 → Anime.js（写起来爽）
设计师主导、视觉动画 → Lottie（协作效率高）
React 项目、手势交互 → Framer Motion（原生体验）

课程目标与学习路径

这门课不是教你怎么「用」动画库，而是带你「拆」动画库。说白了，我们要做三件事：

读懂源码：看看这些库的核心逻辑是怎么写的
理解原理：时间线怎么管理？缓动函数怎么实现？性能怎么优化？
动手改造：基于源码思想，写出自己的动画工具

学习路径是这样的：

第 1-5 章：动画基础与核心概念（时间线、缓动、性能）
第 6-15 章：GSAP 源码深度分析（Timeline、Tween、插件机制）
第 16-22 章：Anime.js 与 Lottie 源码解析
第 23-27 章：Framer Motion 与 React 动画原理
第 28-30 章：动手改造，打造自己的动画库

学习建议：每章看完后，一定要打开源码跟着读一遍。我当年学 GSAP 源码时，把核心文件打印出来，用笔标注每一行的作用。虽然笨，但效果极好。

📚 课程目录

动画库概览：主流动画库介绍与选型指南

为什么需要动画库？

主流动画库逐个看

1. GSAP（GreenSock Animation Platform）

2. Anime.js

3. Lottie

4. Framer Motion

动画库选型对比

课程目标与学习路径