核心架构

相关源文件

• lib/anime.cjs
• lib/anime.esm.js
• lib/anime.esm.min.js
• lib/anime.iife.js
• lib/anime.iife.min.js
• lib/anime.min.cjs
• lib/anime.umd.js
• lib/anime.umd.min.js
• package.json
• types/index.js

本文档阐述了 anime.js 的内部架构，包括其类层次结构、核心组件以及它们如何协同工作以创建动画。它为希望了解 anime.js 内部工作原理的开发人员提供了该库设计和实现细节的技术概览。

有关在项目中如何使用 anime.js 的信息，请参阅概述。有关动画引擎实现的详细信息，请参阅动画引擎。

核心设计理念

Anime.js 围绕精心设计的类层次结构构建，实现了基于时间的动画系统。该架构将计时逻辑与渲染操作分离，使该库能够通过统一的 API 动画各种目标类型（DOM 元素、CSS 属性、SVG 元素和 JavaScript 对象）。

来源：lib/anime.esm.js663-702 lib/anime.esm.js760-761

类层次结构

类层次结构展示了 anime.js 如何通过继承构建功能

1. Clock：提供基本计时功能的基础类。
2. Engine：管理动画循环和更新。
3. Timer：扩展 Clock，提供时间控制操作。
4. JSAnimation：处理目标特定属性的动画。
5. Timeline：管理动画序列。

来源：lib/anime.esm.js673-757 types/index.js340-416

核心组件

来源：lib/anime.esm.js310-341 lib/anime.esm.js428-457

Clock

Clock 类是 anime.js 中计时系统的基础。它管理：

• 通过 fps 属性控制帧率
• 通过 speed 属性控制播放速度
• 动画渲染的时间计算
• 帧调度以优化性能

来源：lib/anime.esm.js673-756 types/index.js340-416

引擎

Engine 扩展了 Clock 并管理动画循环。它：

• 维护活动动画列表
• 在每一帧处理每个动画
• 处理动画的唤醒、暂停和恢复
• 通过跟踪哪些动画需要更新来优化性能

来源：lib/anime.esm.js1380-1461 types/index.js419-471

渲染与 Tick 系统

render 和 tick 函数构成了动画更新系统的核心。

1. render：根据当前时间更新单个动画的状态
2. tick：处理动画及其子动画（对于时间轴）

渲染系统根据以下因素决定何时更新动画：

• 当前时间相对于动画计时
• 值是否已更改
• 重叠动画的组合策略

来源：lib/anime.esm.js760-1042 lib/anime.esm.js1052-1206 types/index.js428-673

动画管线

动画管道展示了 anime.js 如何从创建到渲染处理动画：

1. 动画创建：调用 animate() 时，会创建一个 JSAnimation 实例
2. 目标注册：注册并处理动画目标
3. 补间动画创建：为每个目标创建单独的属性补间动画
4. 引擎注册：动画被添加到引擎的更新循环中
5. 动画循环：引擎在每一帧更新每个动画
6. 补间动画处理：每个补间动画计算并应用新值
7. 值应用：将值应用于目标（DOM、CSS、JS 对象）

来源：lib/anime.esm.js5810-6021 types/index.js428-673

补间动画系统

补间动画系统处理单个属性的动画。补间动画负责：

1. 随时间跟踪属性值
2. 根据计时和缓动计算插值
3. 将值应用于目标（DOM、CSS、JS 对象）

补间动画系统支持不同的值类型：

值类型	描述	示例
NUMBER（数字）	直接数值	42
UNIT（单位）	带单位的数字	42px, 10%
COLOR（颜色）	颜色值（任意格式）	#FFF, rgba(255,0,0,1)
COMPLEX（复合）	包含多个数字的字符串	rect(10px, 20px, 30px, 40px)

以及属性类型：

属性类型	描述	应用于
OBJECT（对象）	JavaScript 对象属性	object.property
ATTRIBUTE（属性）	DOM 元素属性	element.setAttribute()
CSS	CSS 样式属性	element.style.property
TRANSFORM（变换）	CSS 变换属性	translateX、rotate 等
CSS_VAR（CSS 变量）	CSS 自定义属性	--property

来源：lib/anime.esm.js310-327 types/index.js26-44 lib/anime.esm.js760-1042

时间轴系统

时间轴允许动画序列化。主要方面包括：

1. 子动画管理：时间轴在链表中跟踪子动画
2. 计时控制：子动画可以相对于彼此或绝对时间进行定位
3. 迭代管理：时间轴处理循环和交替方向播放

来源：lib/anime.esm.js13106-13392

链表架构

Anime.js 广泛使用链表来管理：

1. 引擎中的活动动画
2. 时间轴中的子动画
3. 动画中的补间动画
4. 复杂属性动画中的组件

这种方法允许高效地插入、删除和遍历相关的动画元素。

链表操作的一个关键实用函数是：

来源：lib/anime.esm.js621-667 types/index.js289-334

值处理

Anime.js 通过以下几个阶段处理值：

1. 解析：将输入值转换为内部表示
2. 分解：将复杂值分解为组件（例如，将颜色分解为 RGB 组件）
3. 插值：计算中间值
4. 缓动：应用计时函数来创建自然运动
5. 组合：合并值以实现叠加或混合动画

来源：lib/anime.esm.js886-980 types/index.js546-617

模块系统和构建过程

Anime.js 采用模块化架构构建，支持多种 JavaScript 模块格式：

1. ESM：ECMAScript 模块（import/export）
2. UMD：通用模块定义（与多种模块系统兼容）
3. IIFE：立即调用函数表达式（全局变量）
4. CommonJS：Node.js 模块系统（require/exports）

源代码以 ESM 格式编写，然后在构建过程中转换为其他格式。

构建过程在 package.json 文件中配置。

来源：package.json53-60 lib/anime.esm.js1-459

环境检测与适应

Anime.js 设计为可在浏览器和 Node.js 环境中运行。它会检测环境并相应地调整其行为。

这种架构使得 anime.js 可以用于：

1. 浏览器中的 DOM 动画
2. 浏览器和 Node.js 中的 JavaScript 对象动画
3. 浏览器中的 SVG 动画
4. 在非浏览器环境中进行测试

来源：lib/anime.esm.js300-307 types/index.js11-16

常量与配置

Anime.js 使用一套全局常量和配置设置来控制其行为。

这些设置控制默认动画行为，并且可以在动画创建时被覆盖。

来源：lib/anime.esm.js412-449 types/index.js101-139

总结

Anime.js 构建于精心设计的架构之上，该架构将计时、动画逻辑和值处理等关注点分离。以 Clock 类为起点的继承层次结构为计时操作提供了基础，并由 Engine、Timer、JSAnimation 和 Timeline 类进行扩展。

补间动画系统管理单个属性的动画，支持各种值类型和属性类型。渲染系统使用链表跟踪和管理动画，高效地仅更新需要更新的部分。

这种架构使 anime.js 能够通过统一的 API 动画各种目标（DOM 元素、CSS 属性、SVG 元素和 JavaScript 对象），同时保持高性能。

来源：lib/anime.esm.js types/index.js