时间轴示例

相关源文件

• examples/assets/css/styles.css
• package.json

本文档提供了使用 anime.js 时间轴系统创建复杂动画序列的实用示例和演示。它展示了如何使用时间轴来协调多个动画，实现精确的计时和控制。有关时间轴系统的详细 API 文档，请参阅时间轴系统。

理解 anime.js 中的时间轴

anime.js 中的时间轴功能允许您同步多个动画并控制它们的时序关系。与运行单个动画不同，时间轴允许您使用简洁、可链式调用的 API 来创建序列、重叠动画和构建复杂的编排。

来源: package.json

基本时间轴示例

基本时间轴将动画一个接一个地排序。每个动画在前一个动画完成后开始。

示例代码结构

来源: package.json

带时间偏移的时间轴

时间轴最强大的功能之一是能够使用 offset 参数来控制每个动画相对于前一个动画何时开始。

偏移类型

1. 默认（无偏移） - 动画在前一个动画结束后开始
2. 相对偏移 - 动画在前一个动画结束前开始
3. 绝对偏移 - 动画在指定的延迟后开始
4. 百分比偏移 - 动画在前一个动画持续时间的百分比处开始

带各种偏移的示例

来源: package.json

嵌套时间轴

时间轴可以嵌套在其他时间轴中，以实现模块化的动画组合。

嵌套时间轴示例

来源: package.json

时间轴控制和播放

时间轴对象提供了与单个动画类似的播放控制方法。

时间轴控制示例

来源: package.json

实际示例：交错序列

此示例演示了如何将时间轴与交错动画结合起来，以创建复杂的序列。

示例代码

来源: package.json, examples/assets/css/styles.css

时间轴参数

以下是创建时间轴时可使用的常用参数参考表

参数	类型	描述
autoplay	布尔值	时间轴是否应自动开始播放。默认值：true
duration	数字	所有子动画的默认持续时间（毫秒）。
easing (缓动)	String/Function	所有子动画的默认缓动函数。
direction	字符串	动画方向（'normal', 'reverse', 'alternate'）。
loop	Boolean/Number	是否循环时间轴以及循环次数。
delay	数字	时间轴开始前的默认延迟。
endDelay	数字	时间轴完成后的默认延迟。
update	功能	在每个动画帧上执行的回调函数。
complete	功能	时间轴完成时执行的回调函数。

来源: package.json

时间轴执行流程可视化

这是一个展示时间轴如何处理和执行动画的图表

来源: package.json

高级示例：SVG 动画序列

此示例演示了时间轴如何动画 SVG 图形的各种属性。

示例代码结构

来源: package.json, examples/assets/css/styles.css

结论

时间轴是 anime.js 中一个强大的功能，可以创建复杂、精确计时的动画序列。通过使用本文档中概述的方法和参数，您可以使用简洁、可维护的代码编排复杂的动画。

有关时间轴 API 的更多详细信息，请参阅时间轴系统文档。有关动画 SVG 等特定元素的示例，请参阅SVG 和 Canvas 示例。