anime.js

Anime.js 是一个专注于速度与灵活性的轻量级 JavaScript 动画引擎，以单一 API 驱动 CSS 变换、SVG 变形、滚动同步、拖拽交互与时间线编排，在 24.50 KB 的包体内提供模块化按需加载能力。

核心能力与模块化设计

Anime.js 4.0.0 将引擎拆分为可独立导入的子模块，开发者只需引入实际使用的部分即可控制最终体积。每个模块的精确大小在官网列出：核心 Timer 5.60 KB，Animation 增加 5.20 KB，Timeline 增加 0.55 KB，Draggable 6.41 KB，Scroll 4.30 KB，Scope 0.22 KB，SVG 0.35 KB，Stagger 0.48 KB，Spring 0.52 KB，WAAPI 引擎 3.50 KB。这种设计让基础动画场景的打包体积可低至 10 KB 左右。

• 模块化导入：支持按需加载 Timer、Animation、Timeline、Draggable、Scroll、Scope、SVG、Stagger、Spring、WAAPI 等独立模块
• 包体明细：官网公开每个模块的精确 KB 数，最小模块 Scope 仅 0.22 KB
• 版本分支：同时维护 4.0.0、3.2.2、2.1.0 三个大版本，文档可切换

动画特性与实用工具集

引擎提供一套完整的动画工具箱，涵盖从基础补间到高级编排的全链条需求。属性级参数允许为每个动画属性单独设置持续时间、缓动函数和延迟；关键帧系统支持基于时间百分比或绝对持续时间的混合写法。内置 Stagger 工具可实现时间、数值、时间轴位置三种交错模式，配合网格与轴参数能快速生成复杂排列效果。SVG 工具集包含形状变形（morphTo）、运动路径（createMotionPath）和线条绘制（createDrawable）三个专用方法。

• 属性级参数：每个 CSS 或 JS 属性可独立配置 duration、ease、delay、composition
• 关键帧：支持基于持续时间（如 500ms）和基于百分比（如 '50%'）两种关键帧定义
• Stagger 三模式：时间交错、值交错、时间轴位置交错，支持 grid 网格与 axis 轴向控制
• SVG 三件套：morphTo（路径变形）、createMotionPath（运动路径）、createDrawable（线条绘制）
• 弹簧物理：createSpring 可自定义 stiffness（刚度）与 damping（阻尼），用于拖拽释放缓动

滚动同步与响应式作用域

Scroll Observer API 允许动画与滚动事件精确同步，支持多种同步模式（如播放进度、平滑滚动、缓动滚动），并提供 onEnter、onLeave、onUpdate 等完整回调。Scope API 则让动画能够响应媒体查询，通过 matches 对象在 portrait/landscape 等条件下切换动画参数，同时支持自定义根元素与作用域内方法注册。

• 滚动回调：onEnter、onEnterForward、onEnterBackward、onLeave、onLeaveBackward、onUpdate、onSyncComplete、onResize
• Scope 媒体查询：通过 mediaQueries 配置 portrait 等条件，在 add 回调中根据 matches 切换动画值
• Scope 根元素：可指定自定义根元素，配合 CSS 显示动画与交错布局

拖拽与布局动画

Draggable API 提供完整的拖拽交互能力，支持轴约束（x/y）、吸附（snap）、映射到目标（mapTo），以及释放时的弹簧物理参数（releaseMass、releaseStiffness、releaseDamping）。布局动画（Layout）是 4.0.0 的新功能，可记录元素位置状态并驱动进入、离开、交换父元素等过渡，支持模态对话框动画场景。

• 拖拽参数：轴约束、snap 吸附、mapTo 映射、container 容器与 padding、释放弹簧物理参数
• 拖拽回调：onGrab、onDrag、onUpdate、onRelease、onSnap、onSettle、onResize、onAfterResize
• 布局动画：record() 记录状态，animate() 驱动 enterFrom/leaveTo/swapAt 过渡
• 布局模式：CSS 显示动画、DOM 顺序动画、进入/退出布局动画、交换父元素动画、模态对话框动画

常见问题

Q1：Anime.js 4.0.0 的包体积到底有多小？能否只引入需要的功能？

A1：官网列出了每个模块的精确大小：核心 Timer 5.60 KB，Animation 增加 5.20 KB，Timeline 增加 0.55 KB，Draggable 6.41 KB，Scroll 4.30 KB，Scope 0.22 KB，SVG 0.35 KB，Stagger 0.48 KB，Spring 0.52 KB，WAAPI 3.50 KB。你可以通过 ES Module 按需导入，例如只使用基础动画时仅需 Timer + Animation，合计约 10.80 KB。

Q2：Anime.js 的 Scroll Observer 和 Intersection Observer 有什么区别？

A2：Anime.js 的 Scroll Observer 是专为动画同步设计的，提供多种同步模式（播放进度、平滑滚动、缓动滚动），并包含 onEnter/onLeave/onUpdate 等动画专用回调，而非简单的交叉检测。它支持自定义容器、目标、轴和阈值，还能通过 link() 方法将多个观察器关联。

Q3：Anime.js 能否与 React 一起使用？

A3：官网文档明确列出了「与 React 一起使用」的章节，提供了模块导入和与原生 JS 配合的指南。由于 Anime.js 直接操作 DOM，在 React 中通常通过 ref 获取元素后调用 animate()，或在 useEffect 中管理动画生命周期。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。