本文档涵盖了anime.js的高级动画技术和特殊用例。它探讨了复杂的动画模式、SVG操作、对象属性动画以及精细的播放控制，使开发者能够创建超出基本过渡效果的复杂动画。有关anime.js的入门用法，请参阅基本用法。
动画合成允许多个动画与同一属性交互，决定重叠动画如何混合或相互替换。这通过composition参数控制，该参数定义了多个动画以同一元素为目标时的交互行为。
来源： lib/anime.esm.js310-341 lib/anime.esm.js425-428
| 合成类型 | 值 | 行为 | 用例 |
|---|---|---|---|
replace | 0 | 取消同一属性的先前动画 | 默认；确保平滑过渡 |
none | 1 | 无特殊合成逻辑；动画独立运行 | 当多个独立动画需要影响同一目标时 |
blend | 2 | 同一属性上所有动画的值相加 | 创建复杂的叠加效果，例如多个力影响位置 |
当多个动画作用于同一属性时，合成属性决定它们如何交互
混合模式使用叠加动画系统，将活动动画的值结合起来
来源： lib/anime.esm.js916-939 lib/anime.esm.js574-609
Anime.js 对动画实例提供精细控制，允许精确操作播放状态和时间。
来源： lib/anime.esm.js809-881 lib/anime.esm.js1071-1075
| 方法 | 描述 | 使用示例 |
|---|---|---|
play() | 开始或恢复动画 | animation.play() |
pause() | 暂停动画 | animation.pause() |
reverse() | 反转动画方向 | animation.reverse() |
restart() | 从头重新开始动画 | animation.restart() |
seek(time) | 跳到指定时间（毫秒） | animation.seek(500) |
seekPercent(percent) | 跳到动画的指定百分比 | animation.seek('50%') |
Anime.js 在动画生命周期的各个点提供回调钩子，用于执行自定义逻辑
来源： lib/anime.esm.js429-435 lib/anime.esm.js822-826 lib/anime.esm.js996-1002
回调函数接收动画实例作为参数，提供对所有动画属性的访问
Anime.js 提供 SVG 动画专用工具，包括路径变形、运动路径和绘图动画。
路径变形实现了不同 SVG 路径形状之间的平滑过渡
运动路径允许元素沿着 SVG 路径轨迹移动
使用示例
createDrawable 函数可以控制 SVG 路径的绘图动画
SVG 绘图动画通过操纵stroke-dashoffset和stroke-dasharray属性来控制路径的可见部分
Anime.js 可以像动画 DOM 元素一样轻松地动画 JavaScript 对象属性。这对于数据可视化、游戏开发或创建自定义动画驱动程序非常有用。
来源： lib/anime.esm.js311-313 lib/anime.esm.js953-954
JavaScript 对象动画示例
检测并动画化的值类型包括
| 值类型 | 常量 | 描述 | 示例 |
|---|---|---|---|
NUMBER | valueTypes.NUMBER | 简单的数值 | width: 100 |
UNIT | valueTypes.UNIT | 带单位的值 | fontSize: '16px' |
COLOR | valueTypes.COLOR | RGB/RGBA/HEX/HSL 颜色值 | backgroundColor: '#FFF' |
COMPLEX | valueTypes.COMPLEX | 包含多个值的复杂字符串 | clipPath: 'polygon()'` |
来源： lib/anime.esm.js321-326 lib/anime.esm.js909-940
anime.js 中的时间线允许对多个动画进行精确的排序和协调。
| 偏移类型 | 描述 | 示例 |
|---|---|---|
| 数字 | 绝对时间（毫秒） | timeline.add(animation, 1000) |
| 字符串 (+=) | 在前一个动画之后延迟 | timeline.add(animation, '+=500') |
| 字符串 (-=) | 在前一个动画结束前开始 | timeline.add(animation, '-=200') |
| 字符串 (==) | 与前一个同时开始 | timeline.add(animation, '==') |
| 功能 | 动态计算 | timeline.add(animation, () => someValue) |
交错动画允许在一组目标中创建顺序或重叠的动画。
交错函数根据以下参数创建延迟模式：
| 参数 | 描述 |
|---|---|
value | 每个元素之间的基本延迟（毫秒） |
grid | 定义基于网格布局的列和行的数组 |
from | 起始点（'first'、'last'、'center' 或索引） |
direction | 交错方向（'normal'、'reverse' 或 'alternate'） |
easing (缓动) | 将缓动函数应用于交错模式 |
叠加动画允许多个动画同时影响同一属性，其值将相加。
来源： lib/anime.esm.js580-609 lib/anime.esm.js742-744
叠加动画示例
结果结合了第一个动画的线性运动和第二个动画的振荡，创造出比单独任何一个动画都更复杂的运动模式。
参数修改器允许在动画过程中动态操纵动画值。
来源： lib/anime.esm.js910-911 lib/anime.esm.js427
使用示例
修改器函数接收计算出的动画值，并在将其应用于目标之前返回修改后的版本。