值处理系统

相关源文件

• 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 值处理系统在动画过程中处理值的转换、插值和应用。它支持各种数据类型，并确保它们之间平滑过渡。

来源：lib/anime.esm.js311-326 lib/anime.esm.js846-997

值类型分类

值处理系统将值分为四种基本类型

类型	描述	示例	内部枚举值
NUMBER	简单的数值	42, 3.14	valueTypes.NUMBER = 0
UNIT	带 CSS 单位的数字	100px, 45deg, 2em	valueTypes.UNIT = 1
COLOR	各种格式的颜色值	#FF0000, rgba(255,0,0,1)	valueTypes.COLOR = 2
COMPLEX	包含多个值的字符串	10px 20px 5px, polygon(...)	valueTypes.COMPLEX = 3

值类型决定了系统在动画过程中如何解析和插值。

来源：lib/anime.esm.js321-326 lib/types/index.js27-32

值解析

创建动画时，系统会解析起始值和结束值，以确定它们的类型并为插值做准备。

解析系统使用正则表达式识别和提取值的部分内容

• 用于单位：unitsExecRgx = /^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i
• 用于十六进制颜色：hexTestRgx = /(^#([\da-f]{3}){1,2}$)|(^#([\da-f]{4}){1,2}$)/i
• 用于 RGB/RGBA：rgbExecRgx, rgbaExecRgx
• 用于 HSL/HSLA：hslExecRgx, hslaExecRgx
• 用于复杂字符串中的数字：digitWithExponentRgx = /[-+]?\d*\.?\d+(?:e[-+]?\d)?/gi

来源：lib/anime.esm.js396-407 lib/anime.esm.js496-504 lib/anime.esm.js877-940

值插值

在动画过程中，系统根据值的类型在起始值和结束值之间进行插值。

NUMBER 和 UNIT 插值

对于数值（带或不带单位），系统使用线性插值

对于 UNIT 类型，单位在插值后附加

COLOR 插值

对于颜色，每个分量（R、G、B、A）分别进行插值

COMPLEX 字符串插值

对于复杂字符串，系统会将文本部分和数字部分分开，对数字进行插值，然后重构字符串

来源：lib/anime.esm.js909-940 lib/types/index.js545-578

目标和属性类型

系统支持不同类型的动画目标和属性

补间动画的类型根据目标和属性确定

1. OBJECT (0): JavaScript 对象属性
2. ATTRIBUTE (1): DOM 元素属性
3. CSS (2): CSS 样式属性
4. TRANSFORM (3): CSS 变换属性
5. CSS_VAR (4): CSS 自定义属性（变量）

来源：lib/anime.esm.js311-319 lib/anime.esm.js947-972 lib/types/index.js19-25

变换属性处理

该系统包含针对 CSS 变换的专门处理，可实现多个变换属性的高效动画

1. 变换属性存储在目标元素的缓存中
2. 短变换别名（x, y, z）被映射到完整的变换名称
3. 当多个变换发生变化时，它们会组合成一个单一的变换字符串

来源：lib/anime.esm.js362-387 lib/anime.esm.js984-991

值组合系统

Anime.js 包含一个值组合系统，用于控制多个动画如何影响同一属性

组合系统有三种模式

1. replace (0): 新动画覆盖旧动画（默认）
2. none (1): 动画之间不进行组合
3. blend (2): 动画以叠加方式组合

来源：lib/anime.esm.js336-340 615-660

值修改和四舍五入

系统包含用于值修改和精度控制的实用工具

1. 每个补间动画都可以有一个修改器函数，用于在插值过程中处理值
2. 全局精度设置控制小数位四舍五入
3. 对动画开始/结束时的值进行特殊处理，以确保精确值

来源：lib/anime.esm.js550-556 lib/anime.esm.js901

与动画管道集成

值处理系统通过 render 函数与动画引擎集成，该函数处理每一帧的所有活动补间动画。

值处理发生在 render 函数内部，它是动画引擎的核心。此函数处理时间计算、值插值和目标更新。

来源：lib/anime.esm.js770-1042 lib/types/index.js428-673

总结

anime.js 中的值处理系统使该库能够对各种不同值类型的属性进行动画处理。其主要组件包括：

1. 值类型分类（NUMBER、UNIT、COLOR、COMPLEX）
2. 使用正则表达式进行值解析
3. 类型特定的插值算法
4. 目标特定的值应用
5. 变换属性优化
6. 多动画值组合

正是这种灵活的系统，使得 anime.js 能够在保持高性能的同时处理复杂的动画。

来源：311-340 396-407 lib/anime.esm.js870-997