本文档解释了如何使用 anime.js 为 JavaScript 对象属性设置动画。与 DOM 动画（参见 CSS 动画）不同，JavaScript 对象动画允许您为普通 JavaScript 对象的数值属性设置动画，而不是 DOM 元素。此技术对于创建不直接与元素视觉表现相关的动画非常有用，这些动画反而可以控制应用程序逻辑、数据模型或驱动其他程序化行为。
Anime.js 可以通过随时间直接修改对象属性值来为 JavaScript 对象属性设置动画。该库使用与 DOM 动画相同的动画引擎和缓动函数，但将补间值直接应用于对象属性，而不是 CSS 属性或特性。
在 anime.js 架构中，JavaScript 对象动画遵循与 DOM 动画不同的代码路径。当目标不是 DOM 元素时，该库将动画值直接应用于对象属性。
Anime.js 通过检查目标是 DOM 元素还是 JavaScript 对象来确定如何为其设置动画
来源: lib/anime.esm.js318-326 lib/anime.esm.js897-903
该库使用 isDomSymbol Symbol 来识别 DOM 元素。如果目标不具有此 Symbol，则将其视为 JavaScript 对象，并且动画使用 tweenTypes.OBJECT 类型。
JavaScript 对象的动画过程在值应用方式上与 DOM 动画不同
来源: lib/anime.esm.js902-905 lib/anime.esm.js953-954
为 JavaScript 对象属性设置动画
您可以像使用 DOM 动画一样，使用任何标准动画参数（持续时间、缓动、延迟等）。
由于对象属性在动画过程中实时更新，您可以随时访问它们的当前值
您可以同时为多个 JavaScript 对象设置动画
对于 JavaScript 对象动画，该库会确定值的类型（数字、单位、颜色、复杂类型）并相应地进行处理
来源: lib/anime.esm.js909-940 lib/anime.esm.js953-954
实现上的主要区别在于值的应用方式
| 目标类型 | 值应用方法 | 代码实现 |
|---|---|---|
| JavaScript 对象 | 直接属性赋值 | tweenTarget[tweenProperty] = value |
| DOM CSS 属性 | DOM 样式对象 | tweenStyle[tweenProperty] = value |
| DOM 特性 | setAttribute 方法 | tweenTarget.setAttribute(tweenProperty, value) |
| DOM 变换 | Style transform 属性 | 通过缓存对象更新 transform 属性 |
| CSS 变量 | setProperty 方法 | tweenStyle.setProperty(tweenProperty, value) |
尽管 anime.js 不直接支持为嵌套对象属性设置动画，但您可以在属性名称中使用点表示法并手动解析它
更好的方法是直接使用对嵌套对象的引用
您可以在同一动画中同时为 DOM 元素和 JavaScript 对象设置动画
但是，请注意，DOM 元素特有的属性（例如 translateX）对于 JavaScript 对象将被忽略，反之亦然。
JavaScript 对象动画在与回调函数结合使用时特别有用
JavaScript 对象动画特别适用于
JavaScript 对象动画通常比 DOM 动画性能更好，因为
但是，您如何处理动画值仍然可能影响性能。例如，如果您在 update 回调中更新 DOM 元素，您可能仍然会触发重绘。
anime.js 中的 JavaScript 对象动画提供了一种强大的方式来为非视觉属性设置动画并驱动应用程序逻辑。通过随时间直接修改 JavaScript 对象属性，您可以创建控制应用程序行为、与视觉动画协调或驱动超越 DOM 操作的复杂交互的动画。