Anime.js

轻量级 JavaScript 动画引擎——用简洁 API 驱动 CSS 属性、SVG、DOM 属性与 JavaScript 对象动画

动画JavaScript动画轻量级模块化

Anime.js 是流行的开源 JavaScript 动画引擎，v4 全面模块化重写，支持 CSS、SVG、DOM 和 3D 动画，核心仅 5.6 KB。

Anime.js

轻量级 JavaScript 动画引擎——用简洁 API 驱动 CSS 属性、SVG、DOM 属性与 JavaScript 对象动画，v4 全面模块化重写后成为兼顾性能与灵活性的现代动画方案。

技术简介说明

Anime.js 是由 Julian Garnier 创建并维护的开源 JavaScript 动画引擎，自 2015 年发布以来已有超过十年历史，GitHub 星标超过 70,000，是前端动画领域最受欢迎的开源项目之一。它以极简的 API 设计著称，开发者可以用几行代码实现从简单的 CSS 过渡到复杂的多阶段时间线编排等各种动画效果，覆盖 Web 开发中几乎所有常见的动画需求。

2025 年 4 月，Anime.js 发布了里程碑式的 v4 版本，这是一次从零开始的全面重写。v4 将原有的单体全局 API（anime()）彻底重构为模块化导入架构，开发者可以按需引入 animate()、createTimeline()、createDraggable() 等独立函数，实现真正的 Tree-shaking。v4 还引入了 Web Animations API（WAAPI）集成、滚动观察器、物理拖拽、响应式媒体查询作用域等现代特性，并原生支持 TypeScript，使库的定位从"轻量动画工具"升级为"通用动画引擎"。

2026 年 6 月发布的 v4.5.0 进一步推出 registerAdapter() 适配器系统，使 Anime.js 的动画能力突破 DOM 边界，可以直接驱动 Three.js 3D 对象、Canvas 上下文等任意非 DOM 目标，并内置了 Three.js 适配器。配合核心计时器仅 5.6 KB（gzipped）的极小体积，Anime.js v4 在保持轻量的同时，具备了与 GSAP 等商业库竞争的全面能力。

基本信息

官网：https://animejs.com
GitHub：https://github.com/juliangarnier/anime
License：MIT
最新版本：v4.5.0（2026 年 6 月 22 日发布）
主要维护者/公司：Julian Garnier（个人开发者，社区赞助驱动）
npm 周下载量：约 110 万次（2026 年数据）
GitHub Stars：约 70,700 | Forks：约 4,800
语言构成：JavaScript 84.1%、HTML 15.5%、CSS 0.4%
包体积（gzipped）：核心 Timer 模块 5.60 KB，完整包约 27 KB

快速上手

安装

# npm
npm install animejs
 
# pnpm
pnpm add animejs
 
# yarn
yarn add animejs
 
# CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

基础配置

Anime.js v4 采用模块化导入，按需引入所需功能：

// 核心动画功能
import { animate } from 'animejs';
 
// 时间线
import { createTimeline } from 'animejs';
 
// 工具函数
import { stagger, utils } from 'animejs';
 
// 拖拽功能
import { createDraggable } from 'animejs';
 
// 滚动观察器
import { createScrollObserver } from 'animejs';
 
// SVG 工具
import { svg } from 'animejs';
 
// 适配器（v4.5.0+）
import { registerAdapter } from 'animejs/adapters';

最小示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background: #3b82f6;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
 
  <script type="module">
    import { animate } from 'https://esm.run/[email protected]';
 
    // 基础动画：位移 + 旋转 + 循环
    animate('.box', {
      translateX: 200,
      rotate: 360,
      duration: 1000,
      ease: 'inOutExpo',
      loop: true,
      alternate: true,
    });
  </script>
</body>
</html>

核心概念与架构

核心概念

概念	说明
Timer	最基础的计时单元，管理 `requestAnimationFrame` 主循环，控制播放/暂停/跳转
Animate	核心动画函数 `animate(targets, params)`，驱动 CSS 属性、变换、DOM 属性等
Timeline	时间线 `createTimeline()`，编排多个动画/定时器的顺序、重叠和回调
Keyframes	关键帧系统，支持灵活的属性级关键帧定义
Easing	缓动函数，内置多种预设（`outQuad`、`inOutExpo` 等），支持 `createSpring()` 弹簧物理和自定义贝塞尔
Stagger	交错动画 `stagger()`，为多个目标生成递增/递减的延迟、持续时间或值
Scope	作用域系统，通过媒体查询适配不同屏幕尺寸的动画行为
Adapter	v4.5.0 新增，通过 `registerAdapter()` 扩展动画引擎到非 DOM 目标（Three.js、Canvas 等）

v4 架构变化

v4 是一次彻底的架构重写，核心变化包括：

全局 API → 模块化导入：不再使用 anime() 全局对象，所有功能通过具名导入
单体包 → Tree-shakeable 模块：每个功能模块独立导出，打包工具可自动裁剪未使用代码
新增原生 TypeScript 支持：内置类型定义，无需 @types/animejs
引擎层抽象：新增 engine 模块，支持自定义主循环、手动 engine.update()、文档隐藏暂停等
WAAPI 双引擎：同时支持自研渲染引擎和浏览器原生 Web Animations API

核心特性

1. 模块化按需导入

v4 将库拆分为 Timer（5.60 KB）、Animation（+5.20 KB）、Timeline（+0.55 KB）、Draggable（+6.41 KB）、Scroll（+4.30 KB）等独立模块，完整包仅约 27 KB（gzipped），按需引入可进一步缩小体积。

2. 灵活的 Targets 与属性系统

支持 CSS 选择器、DOM 节点、NodeList、JavaScript 对象等多种目标类型；每个属性可独立配置 from/to 值、缓动、持续时间、延迟，支持函数式动态值。

3. 强大的时间线编排

createTimeline() 支持动画序列精确编排，子动画可继承 defaults 配置，支持嵌套时间线、独立循环、位置标记（< 同步、> 前一个之后、+=100 偏移等）。

4. 滚动驱动动画

createScrollObserver() 实现滚动触发动画，支持阈值设置、方向检测、进度回调，可创建滚动关联的视差和叙事效果。

5. 物理拖拽系统

createDraggable() 为 DOM 元素添加拖拽能力，支持弹簧物理、吸附、甩出（flick）效果，内置边界约束和惯性模拟。

6. SVG 动画工具

svg 模块提供 createMotionPath()（路径运动）、createDrawable()（描边绘制）等专用工具，支持形状变形（morphing）和路径跟随动画。

7. 交错动画（Stagger）

stagger() 工具函数支持按持续时间、值、序列位置生成交错效果，v4.5.0 新增 3D 交错、随机抖动（jitter）和可复现种子。

8. 响应式作用域

createScope() 结合媒体查询注册，同一套动画逻辑可针对不同断点自动切换参数，实现真正的响应式动画。

9. WAAPI 集成

可选择使用浏览器原生 Web Animations API 渲染（约 3 KB），与自研引擎（约 10 KB）灵活切换，在性能和兼容性之间取得平衡。

10. 适配器系统（v4.5.0+）

registerAdapter() 允许将动画能力扩展到任意非 DOM 目标，内置 Three.js 适配器支持 CSS 风格的 3D 变换动画（位置、旋转、缩放、材质、uniforms）。

生态图

Anime.js v4 生态
│
├── 核心模块
│   ├── Timer（基础计时器，5.60 KB）
│   ├── Animation（属性动画，+5.20 KB）
│   ├── Timeline（时间线编排，+0.55 KB）
│   └── Animatable（高性能持续更新，+0.40 KB）
│
├── 交互模块
│   ├── Draggable（物理拖拽，+6.41 KB）
│   ├── ScrollObserver（滚动驱动，+4.30 KB）
│   └── Scope（响应式作用域，+0.22 KB）
│
├── 高级功能
│   ├── SVG（路径/变形/描边，+0.35 KB）
│   ├── Text（文字分割/打乱效果）
│   ├── Layout（自动布局动画）
│   └── WAAPI（Web Animations API 集成）
│
├── 扩展系统
│   ├── Adapters（registerAdapter API）
│   │   └── Three.js Adapter（内置）
│   └── Engine（引擎控制：手动更新、暂停策略等）
│
├── 工具层
│   ├── utils（get/set/random/clamp/round）
│   ├── stagger（交错工具）
│   └── easings（缓动函数库）
│
└── 社区生态
    ├── animejs-nuxt（Nuxt SSR 模块）
    ├── anime.js MCP Server（AI 工具集成）
    └── 中文文档站（animejs.cn）

适用场景

1. UI 微交互与过渡效果

按钮悬停、卡片展开、菜单动画、页面切换过渡等日常 UI 交互，Anime.js 的简洁 API 和轻量体积使其成为理想选择。

2. 复杂时间线编排

多元素协调动画、品牌展示页、产品发布页的复杂动画序列，Timeline 的位置标记和嵌套能力可精确控制每个动画的时序。

3. 滚动驱动叙事页

配合 createScrollObserver()，实现滚动触发的视差滚动、渐进展示、数据可视化叙事等效果。

4. SVG 动画与数据可视化

SVG 路径描边绘制、形状变形、图标动画、图表入场效果，svg 模块提供了专业的 SVG 动画工具链。

5. 拖拽交互界面

看板、拼图、排序列表等需要拖拽功能的场景，createDraggable() 的弹簧物理和惯性效果提供自然的交互体验。

6. Three.js / WebGL 3D 动画

v4.5.0 的适配器系统使 Anime.js 可直接驱动 3D 场景中的对象变换、材质属性、uniform 参数等动画。

7. 游戏与 Canvas 动画

通过 engine.useDefaultMainLoop = false 和 engine.update() 手动控制渲染循环，可集成到游戏引擎或 Canvas 渲染管线中。

开发与工程化

TypeScript 支持

v4 内置完整的 TypeScript 类型定义，无需额外安装 @types 包，支持自动补全、类型检查和重构辅助：

import { animate, type AnimeParams } from 'animejs';
 
const params: AnimeParams = {
  translateX: 200,
  duration: 1000,
  ease: 'inOutExpo',
};
 
animate('.element', params);

构建与打包

支持 ESM / CJS / UMD 多种模块格式
完全 Tree-shakeable，配合 Vite / webpack / Rollup 自动裁剪未使用模块
支持 CDN 直接引入（jsDelivr、unpkg）

框架集成

React：官方文档提供 React 集成指南，推荐使用 useRef + useEffect 管理动画生命周期
Vue / Nuxt：社区提供 animejs-nuxt 模块，支持 SSR
Svelte / Solid：作为纯 JavaScript 库，可直接在任何框架中使用

开发命令

# 开发模式
pnpm dev
 
# 构建
pnpm build
 
# 测试（浏览器）
pnpm test:browser
 
# 测试（Node.js）
pnpm test:node

测试体系

提供浏览器端和 Node.js 端双测试环境
通过 dev:test 命令启动测试开发模式

性能与安全

性能表现

核心计时器仅 5.60 KB（gzipped）：按需加载，首屏无负担
requestAnimationFrame 驱动：利用浏览器原生渲染循环，与显示器刷新率同步
Animatable 模块：专为高频持续更新场景优化（如鼠标追踪），避免不必要的 DOM 查询
最高支持 240 FPS（v4.3.0+），适配高刷新率显示器
WAAPI 模式：可将动画完全交给浏览器原生引擎处理，减少 JavaScript 开销（约 3 KB vs 10 KB）
Engine 手动控制：engine.useDefaultMainLoop = false 允许完全接管渲染时机，适配 Three.js 等自定义帧循环

安全考量

零外部依赖：整个库无任何第三方依赖，不引入供应链风险
MIT 开源许可：无商业使用限制，无版权风险
纯前端库：无网络请求、无数据收集，不引入运行时安全隐患
Snyk 安全扫描：npm 包通过 Snyk 安全检测，无已知漏洞

技术对比

动画库对比总览

特性	Anime.js v4	GSAP 3	Framer Motion (Motion)	CSS 动画
体积（gzipped）	~27 KB（完整）/ 5.6 KB（核心）	~70 KB（含 ScrollTrigger）	~45 KB	0 KB（浏览器原生）
License	MIT	自定义（免费商业使用，有争议条款）	MIT	N/A
TypeScript	原生内置	社区 `@types`	原生内置	N/A
框架无关	✅	✅	主要面向 React（v4 起支持多框架）	✅
Timeline	✅ 强大的时间线	✅ 业界最强	❌ 无原生 Timeline	❌
Scroll 动画	✅ `createScrollObserver`	✅ ScrollTrigger（插件）	✅ `useScroll`	❌ 需 JS 配合
SVG 动画	✅ 专用 SVG 模块	✅ MorphSVGPlugin（付费）	⚠️ 有限支持	⚠️ 有限支持
拖拽系统	✅ `createDraggable`	✅ Draggable（插件）	❌	❌
WAAPI 集成	✅ 可选 WAAPI 引擎	❌	❌	N/A
3D/WebGL	✅ 适配器系统（v4.5.0）	⚠️ 需自行集成	❌	❌
物理弹簧	✅ `createSpring`	✅ 内置	✅ 默认弹簧	❌
学习曲线	低-中	中-高	低（React 开发者）	低
社区规模	70K+ Stars	商业支持，生态最大	React 生态最活跃	N/A

选型建议

选 Anime.js：需要轻量、框架无关、功能全面的动画库；追求 MIT 许可无争议；需要 SVG 动画和拖拽功能；想要 WAAPI 灵活性；或需要将动画扩展到 Three.js 等非 DOM 目标。
选 GSAP：需要业界最成熟的 Timeline 编排；有 ScrollTrigger 高级需求；团队预算允许（部分高级插件为商业授权）；追求最完善的浏览器兼容性保障。
选 Motion（Framer Motion）：React 项目首选；声明式组件动画；团队熟悉 React 范式；需要布局动画（Layout Animation）和手势交互。
选 CSS 动画：简单过渡效果；性能敏感场景（GPU 加速）；不需要 JavaScript 控制的纯展示动画。

最佳实践

1. 按需导入，最小化包体积

// ✅ 推荐：按需导入
import { animate } from 'animejs';
import { createTimeline } from 'animejs';
 
// ❌ 避免：导入整个库
import anime from 'animejs';

2. 优先使用 transform 属性

// ✅ 推荐：transform 属性由 GPU 加速，性能更好
animate('.card', {
  translateX: 100,
  rotate: 45,
  scale: 1.2,
});
 
// ⚠️ 谨慎：width/height/margin 触发布局重排
animate('.card', {
  width: 200,
  height: 200,
});

3. 利用 Timeline 编排复杂序列

import { createTimeline, stagger } from 'animejs';
 
const tl = createTimeline({
  defaults: { duration: 500, ease: 'outExpo' },
});
 
tl.add('.header', { translateY: [50, 0], opacity: [0, 1] })
  .add('.items li', { translateY: [30, 0], opacity: [0, 1] }, stagger(100))
  .add('.footer', { opacity: [0, 1] }, '<'); // '<' 表示与上一动画同步

4. 合理使用 stagger 交错

import { animate, stagger } from 'animejs';
 
// 按索引递增延迟
animate('.grid-item', {
  scale: [0, 1],
  opacity: [0, 1],
  delay: stagger(50), // 每个元素延迟 50ms
});
 
// 从中心向外扩散
animate('.grid-item', {
  scale: [0, 1],
  delay: stagger(50, { from: 'center' }),
});

5. 管理动画生命周期

import { animate } from 'animejs';
 
const animation = animate('.element', {
  translateX: 200,
  duration: 2000,
  onBegin: () => console.log('动画开始'),
  onComplete: () => console.log('动画完成'),
  onRender: () => console.log('帧渲染'),
});
 
// 暂停
animation.pause();
 
// 恢复
animation.resume();
 
// 跳转到指定时间（毫秒）
animation.seek(500);
 
// Promise 方式等待完成
animation.then(() => {
  console.log('动画已完成');
});

6. React 集成模式

import { useRef, useEffect } from 'react';
import { animate } from 'animejs';
 
function AnimatedCard() {
  const cardRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    if (!cardRef.current) return;
 
    const anim = animate(cardRef.current, {
      translateY: [20, 0],
      opacity: [0, 1],
      duration: 600,
      ease: 'outExpo',
    });
 
    return () => {
      anim.pause(); // 组件卸载时清理
    };
  }, []);
 
  return <div ref={cardRef}>卡片内容</div>;
}

技术局限与边界

已知局限

非 React 原生：Anime.js 是命令式 DOM 操作库，在 React 中需要手动管理生命周期（useEffect + useRef），不如 Motion（Framer Motion）的声明式组件模型自然。
Timeline 能力弱于 GSAP：虽然 v4 Timeline 已经很强大，但在极端复杂的嵌套编排、标签定位、帧精确同步方面，GSAP 的 Timeline 仍是业界标杆。
无内置 ScrollTrigger 等效物：createScrollObserver() 功能相对基础，不支持 GSAP ScrollTrigger 的 pin、scrub、markers 等高级特性。
SVG Morphing 有限：内置 SVG 模块不支持复杂的路径变形（morphing），需要配合其他库（如 Morpheus）实现。
单人维护风险：项目主要由 Julian Garnier 一人开发维护，虽然社区活跃，但核心开发依赖个人，存在可持续性风险。
学习资源相对少：相比 GSAP 和 Framer Motion，Anime.js 的高质量中文教程和商业案例偏少，v4 的学习资源仍在建设中。
v3 → v4 迁移成本：API 全面重写，v3 代码无法直接使用，需要参照迁移指南逐项修改，参数重命名、回调改名、loop 语义变化等均需适配。

不适用场景

需要企业级商业支持和 SLA 保障的项目 → 考虑 GSAP（商业许可）
纯 React 项目且不需要复杂 Timeline → 考虑 Motion
简单的 CSS 过渡即可满足的场景 → 不需要引入任何 JS 库
需要复杂的 SVG 路径变形 → 考虑专用 SVG 动画库

学习资源

官方资源

Anime.js 官网 — 包含大量交互式示例
官方文档 — v4 完整 API 文档
GitHub Wiki 迁移指南 — v3 → v4 迁移指南
中文文档站 — 社区维护的中文翻译

社区资源

LLM 引导文件（Issue #1105） — v4 的 AI 辅助开发指南
Anime.js 入门教程（Medium） — 英文入门系列
Anime.js 系列教程（DEV Community） — 从环境搭建到进阶
GSAP vs Anime.js vs Motion vs WAAPI 对比（ICS MEDIA） — 2026 年动画库横评
Hacker News v4 发布讨论 — 社区反馈与技术讨论
YouTube 视频教程 — 10 分钟快速上手 Anime.js

示例与灵感

Anime.js 官网示例集 — 官方展示页面包含数十个高质量动画示例
CodePen Anime.js 合集 — 社区开发者的大量创意示例

2026 年现状

版本	发布日期	关键更新
v4.0.0	2025-04-03	全面重写，模块化 API
v4.3.0	2026-01-20	`createLayout()`、函数式缓动、240 FPS 支持
v4.4.0	2026-04-29	`scrambleText()`、自动 2D 网格交错
v4.5.0	2026-06-22	`registerAdapter()` 适配器系统、Three.js 集成

社区活跃度

GitHub Stars：约 70,700，在前端动画库中名列前茅
npm 周下载量：约 110 万次，属于 npm 生态中的"关键项目"级别
Issue 活跃：GitHub Issues 持续有社区反馈和功能请求
生态扩展：animejs-nuxt（Nuxt SSR 模块）、Anime.js MCP Server（AI 工具集成）等周边项目开始出现
v4 采纳：v4 发布一年后，社区教程、案例逐渐丰富，官网本身即是最佳动画展示

发展趋势

Anime.js v4 通过模块化重写、WAAPI 集成和适配器系统，从"轻量动画工具"成功转型为"通用动画引擎"。2026 年的 Anime.js 在保持轻量的同时，已具备覆盖 DOM 动画、SVG、滚动驱动、物理拖拽、3D/WebGL 等全场景能力。随着 v4 生态成熟和 TypeScript 原生支持，预计将吸引更多企业级项目采用。

参考资料

Anime.js GitHub 仓库

Anime.js 官网

Anime.js v4 迁移指南

npm: animejs

Bundlephobia: animejs

ICS MEDIA: GSAP vs Anime.js vs Motion vs WAAPI

LibHunt: anime.js changelog

Snyk: animejs 安全报告

Anime.js

Anime.js

技术简介说明

基本信息

快速上手

安装

基础配置

最小示例

核心概念与架构

核心概念

v4 架构变化

核心特性

1. 模块化按需导入

2. 灵活的 Targets 与属性系统

3. 强大的时间线编排

4. 滚动驱动动画

5. 物理拖拽系统

6. SVG 动画工具

7. 交错动画（Stagger）

8. 响应式作用域

9. WAAPI 集成

10. 适配器系统（v4.5.0+）

生态图

适用场景

1. UI 微交互与过渡效果

2. 复杂时间线编排

3. 滚动驱动叙事页

4. SVG 动画与数据可视化

5. 拖拽交互界面

6. Three.js / WebGL 3D 动画

7. 游戏与 Canvas 动画

开发与工程化

TypeScript 支持

构建与打包

框架集成

开发命令

测试体系

性能与安全

性能表现

安全考量

技术对比

动画库对比总览

选型建议

最佳实践

1. 按需导入，最小化包体积

2. 优先使用 transform 属性

3. 利用 Timeline 编排复杂序列

4. 合理使用 stagger 交错

5. 管理动画生命周期

6. React 集成模式

技术局限与边界

已知局限

不适用场景

学习资源

官方资源

社区资源

示例与灵感

2026 年现状

最新版本与迭代速度

社区活跃度

发展趋势