AVW-2：动画引擎全景对比——GSAP、anime.js、Motion、Animate.css 与 Glaze

AI 动态视觉 Web 专题 全景地图 | AVW-2 动画引擎 ← 本文 | 数据可视化 | 交互叙事 | AI 生成 UI | 视频与动效 | 程序化三剑客 | 中国生态 | 视觉指南

注意：GSAP 已在 GSAP 动画实战系列 中详细覆盖。本文侧重于五款引擎的横向对比。

1. GSAP — 工业标准

• 官网: gsap.com
• GitHub: greensock/GSAP · 19k+ stars
• 许可: 核心免费，高级插件 $99+/年
• 代表用户: Apple、Nike、Airbnb、Stripe、Google

GSAP 的真正壁垒不在单个 API（gsap.to 谁都会写），而在于：

1. Timeline 编排系统 — 位置参数（<, -=0.5, >) 让复杂动画序列的编排从"心算 delay"变成"声明时序"
2. ScrollTrigger 插件 — 滚动驱动动画的行业标准，功能完备性上无竞品接近
3. 生产级插件矩阵 — SplitText、DrawSVG、MorphSVG、Flip 在各自领域都是最佳解

// GSAP 的 Timeline 编排
const tl = gsap.timeline({ defaults: { duration: 0.6, ease: 'power2.out' } })
tl.from('.header', { y: -50, opacity: 0 })
  .from('.content', { y: 50, opacity: 0 }, '-=0.3')  // 重叠 0.3s
  .from('.footer', { opacity: 0 }, '>')                // 紧跟上一个之后

劣势: 包体积 30KB gzip（加插件更大），React 集成有命令式/声明式张力。自 Webflow 收购后所有插件已免费。

2. anime.js — 优雅的轻量级对手

• 官网: animejs.com
• GitHub: juliangarnier/anime · 50k+ stars
• 许可: MIT
• 包体积: 14KB gzip

anime.js 追求 API 的极致简洁和统一：

anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
})

对比 GSAP：

优势场景: 创意/艺术类网站，快速原型，SVG 密集动画。API 更接近设计师思维。

短板: 没有 ScrollTrigger 等价物 — 这是和 GSAP 之间最大的鸿沟。v3 已停滞，v4 开发近两年未正式发布。

3. Motion — React 原生方案的王者

• 官网: motion.dev
• GitHub: motiondivision/motion · 25k+ stars
• 许可: MIT
• 前身: Framer Motion（2024 年底更名）
• 生态: Vercel 投资，与 Next.js 深度绑定

Motion 的声明式 API 天然融入 React 渲染模型：

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Hello World
</motion.div>

杀手特性 — layout prop:

<motion.div layout>  {/* 自动追踪 position/size 变化并 FLIP 动画 */}
  {item.title}
</motion.div>

零代码的 FLIP 动画 — 这在列表重排、Tab 切换、Card 展开等 UI 状态转换场景中是无敌的。

优势场景: React/Next.js 应用、UI 组件动画、布局动画、手势交互（whileHover/whileTap/drag 内建）。

短板: 复杂编排不如 GSAP Timeline，没有 ScrollTrigger 级别的 pinning/scrubbing 功能，SVG 精细动画不及 GSAP 专用插件。

4. Animate.css — 零 JS 的 CSS 动画预设

• 官网: animate.style
• GitHub: animate-css/animate.css · 80k+ stars
• 许可: MIT

<h1 class="animate__animated animate__bounce">弹跳标题</h1>

80+ 种预设动画：Attention seekers (bounce, flash)、Entrances (fadeIn, slideIn)、Exits (fadeOut, slideOut)。

适用: 快速原型、非技术团队、简单着陆页、邮件 HTML。不是引擎，是预设库。不可编程暂停/反转/变速，不能编排多动画，不能根据用户交互动态改变参数。

5. Glaze — Tailwind 风格的动画框架

• 官网: glaze.dev
• 理念: utility-first 动画，类似 Tailwind CSS

<div class="glz-animate glz-from:opacity-0 glz-from:translate-y-4 glz-duration-500 glz-ease-out">
  弹出的卡片
</div>

把 GSAP/Motion 的能力包装成 Tailwind 工具类。学习曲线平，但复杂编排场景下工具类会冗长。生态年轻，社区资源少。

6. 决策树

你的项目用 React？
├── 是 → 动画复杂度？
│   ├── UI 状态转换/布局动画 → Motion
│   ├── 复杂滚动叙事/SVG 动画 → GSAP + useGSAP()
│   └── 简单入场动画 → Animate.css 或 Motion
└── 否 → 动画复杂度？
    ├── 滚动驱动 + 编排 → GSAP（无替代）
    ├── 轻量创意动画 → anime.js
    ├── 零代码原型 → Animate.css
    └── Tailwind 技术栈 → Glaze

7. 综合评分

总评: GSAP 能力最强，anime.js 最优雅，Motion 最 React，Animate.css 最简单，Glaze 最新。没有银弹。

下一篇：AVW-3 数据可视化全景——ECharts、AntV、Plotly、Bokeh 等 15+ 工具

实操清单

• 用 npm install gsap 安装 GSAP，写一个 gsap.timeline() 示例，验证位置参数 <、-=0.5、> 的时序效果
• 为 GSAP 项目引入 ScrollTrigger 插件，实现一个滚动驱动的元素入场动画（scrub: true）
• 用 npm install animejs 安装 anime.js，复现文中 .box 同时驱动 translateX、rotate、backgroundColor 的示例
• 对比 GSAP 与 anime.js 在同一 Stagger 动画上的写法差异（stagger: 0.1 vs anime.stagger(100)）
• 在 React/Next.js 项目中安装 Motion（npm install motion），将一个 <div> 替换为 <motion.div> 并添加 initial/animate/transition props
• 给 Motion 的列表组件加 layout prop，拖动或重排列表项，观察自动 FLIP 布局动画效果
• 在 HTML 文件引入 Animate.css CDN，给标题元素加 animate__animated animate__bounceInDown 类名，验证零 JS 入场动画
• 查阅 animate.style 列出的 80+ 预设，选 3 个 Attention Seeker 类动画（如 pulse、shake）并通过 JS 动态切换 class 触发
• 访问 glaze.dev，按文档在 Tailwind 项目中配置 Glaze，用 glz-animate glz-from:opacity-0 glz-from:translate-y-4 实现卡片弹出效果
• 根据文中决策树，为自己当前项目（React 或纯 HTML）确定最合适的动画引擎，并写出选型理由