综合 · 2026-10-10 08:12 · 5 阅读 · 0 赞
GitHub 70k Star 动画库 Anime.js：几行代码搞定复杂 3D 动画
Anime.js 是一个零依赖、约 17KB 的轻量动画库，支持 DOM、SVG、3D 和数据动画。本文介绍它的核心优势、快速上手示例，并与 GSAP、Framer Motion 等方案对比，帮你判断是否适合项目。
做页面动效，很多人都会碰到几个老问题：CSS 动画序列一复杂就难管，原生 JS 写起来又长又啰嗦，重型动画库一引入，包体积直接上去。今天聊一个 GitHub 近 70k Star 的工具——Anime.js。它零依赖、上手快，DOM、SVG、3D 和数据动画都能覆盖，中小项目用它挺合适。
一、传统动画方案，痛在哪？
CSS 动画 多元素错开、多段衔接，时间轴维护困难；时长、延迟、缓动曲线不能灵活动态改；SVG 路径绘制、形变、沿路径运动实现成本高；统一暂停、重播、倒放要写不少重复代码。
原生 requestAnimationFrame 时间、缓动、错开都要自己处理，样板代码多；多动画同步和序列编排得自己封装；没有现成的 SVG 和交错动画工具。
重型库（如 GSAP） 功能完整但包大，商用还要授权；API 体系复杂，简单动效学习成本不低。
二、Anime.js 的优势
1. 轻量无依赖 压缩后约 17KB，不捆绑插件，原生 JS 或框架里都能直接引入。免费开源，商用无限制，打包压力小。
2. 全类型目标，统一 API CSS 选择器、DOM 节点、JS 对象、SVG、Three.js 模型，都能用同一套语法驱动。页面动效、数据可视化、3D 动画都能兼顾。
3. SVG 原生能力强 路径描边、图形形变、沿轨迹运动都内置，不用再装插件。MG 插画、加载动画、图标动效都能做。
4. Stagger 交错系统 一行代码批量控制多个元素的延迟偏移。列表、卡片入场不用循环写延迟函数。
5. Timeline 时间轴 支持偏移、叠加、倒放、跳转进度，多段动画拼接清楚，播放状态统一控制。
6. 兼容 Web Animations API 底层自动适配浏览器性能，支持硬件加速，低配置手机也更容易保持 60 帧。
三、快速上手
CDN：
npm：
npm i animejs
框架导入：
import { animate, timeline, stagger } from 'animejs'
1. 基础平移旋转
一个对象里同时控制位移、旋转、缩放，配置直观。
2. 列表交错入场
stagger 让每个元素间隔 100ms 依次出现，批量入场很省代码。
3. SVG 路径描边
路径从隐藏到绘制完成，做加载动画很顺手。
4. 时间轴连续动画
const tl = timeline({ autoplay: false }) tl.add({targets:'.box',x:150}) .add({targets:'.box',rotate:180}, '-=300') .add({targets:'.box',opacity:0}) tl.play() // tl.pause() 暂停 / tl.reverse() 倒放
时间轴可以重叠、排序，也能统一控制整段动效。
四、主流动画库对比
| 对比项 | Anime.js | GSAP | Framer Motion | CSS Animation |
|---|---|---|---|---|
| 体积 | 17KB 无依赖 | 40KB+ 插件包 | 45KB（React 专属） | 零体积 |
| 商用授权 | 完全免费开源 | 商用付费 | MIT 免费 | 无限制 |
| SVG 能力 | 原生形变/路径 | 需付费插件 | 基础 SVG | 实现复杂 |
| 多目标交错 | 内置 stagger | 功能全但写法繁琐 | 支持 | 手动循环 |
| 时间轴 | 轻量灵活 | 功能最强 | React 组件化 | 无原生时间轴 |
| 3D/Three.js | 原生适配 | 需额外封装 | 不支持 | 不支持 |
| 上手难度 | 极低 | 偏高 | React 友好 | 简单但复杂难 |
| 适用场景 | 官网、H5、可视化、SVG 图标 | 大型交互、商业项目 | React 组件动效 | 简单 hover、过渡 |
五、什么时候选 Anime.js？
- 中小型官网、活动 H5、移动端页面，想控制包体积；
- 大量 SVG 图标、加载动画、MG 插画；
- 原生 JS、Vue/React 轻量项目，不想上重型库；
- 数据大屏、简单 Three.js 可视化联动；
- 预算有限，需要免费商用、无版权风险。
官网：https://animejs.com/ 缓动示例：https://animejs.com/easing-editor/spring/default