时间轴系统

概述

anime.js 中的时间轴充当动画的容器，允许它们作为一个组进行组织、同步和控制。时间轴管理其子动画的播放，并确定每个动画相对于其他动画的开始或结束时间。

来源：lib/anime.esm.js

类层次结构

Timeline 类是支撑 anime.js 动画引擎的类层次结构的一部分。它继承自处理基本计时功能的 Timer 类，并最终继承自提供基本计时能力的 Clock 类。

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

时间轴类型和参数

创建时间轴时，可以指定各种参数来控制其行为。这些参数在 TimelineParams 类型中定义。

来源：lib/anime.esm.js239-261 types/index.js260-261

创建时间轴

可以使用 anime.timeline() 函数创建时间轴，该函数返回一个新的 Timeline 实例。您还可以为时间轴指定各种选项，包括将应用于添加到时间轴的所有动画的默认值。

关键参数包括：

defaults：子动画的默认动画参数
duration：时间轴的总持续时间
delay：时间轴开始前的初始延迟
loop：时间轴重复的次数
autoplay：时间轴是否应自动开始

来源：lib/anime.esm.js254-261 types/index.js260-261

向时间轴添加动画

使用 add() 方法将动画添加到时间轴。每个动画都可以指定相对于时间轴或上一个动画的开始时间。

向时间轴添加动画时，可以指定一个偏移量来控制动画的开始时间。偏移量可以是

相对值（+= 或 -= 加上一个毫秒时间）
绝对值（一个毫秒时间）
时间轴持续时间的百分比

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

时间轴渲染和播放

时间轴控制其所有子动画的渲染和播放。当时间轴的计时更新时，它会根据每个子动画在时间轴中的位置来更新它们。

时间轴的 tick() 函数处理时间轴内子动画的渲染。它计算每个子动画的合适时间并相应地渲染它们。这是动画序列化的关键所在。

来源：lib/anime.esm.js1042-1109 types/index.js674-716

相对计时系统

时间轴系统的一个关键特性是能够指定动画之间的相对计时。这通过在向时间轴添加动画时的 offset 参数来处理。

时间轴根据动画的相对偏移量计算每个动画的绝对开始时间。这使得复杂的动画编排成为可能。

来源：lib/anime.esm.js770-833 types/index.js428-504

时间轴控制方法

Timeline 类继承了 Timer 类的控制方法，这些方法允许您控制整个时间轴及其所有子动画的播放。

主要控制方法包括

play()：开始或恢复播放
pause()：暂停播放
restart()：重置并从头开始播放
seek(time)：跳到时间轴中的特定点
reverse()：反向播放时间轴

这些方法会影响时间轴内的所有动画，从而实现对复杂动画序列的统一控制。

来源：lib/anime.esm.js673-749 types/index.js340-417

子动画处理

当时间轴更新时，它会根据每个子动画在时间轴中的位置来处理它们。

时间轴的 tick() 方法负责更新每个子动画的时间并渲染它们。它根据每个子动画在时间轴中的位置和当前时间轴时间来计算合适的子动画时间。

来源：lib/anime.esm.js1052-1109 types/index.js682-716

内部数据结构

在内部，Timeline 类维护着一个子动画链表。这使得动画的遍历和更新变得高效。

时间轴使用 _head 和 _tail 属性来跟踪列表中的第一个和最后一个动画。每个动画都具有 _prev 和 _next 属性，将其链接到列表中的相邻动画。

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

完整生命周期

时间轴的完整生命周期包括创建、添加动画、播放和最终完成。

时间轴在其生命周期中会经历多个状态，从创建到完成。在每个阶段，都有不同的方法和属性可用于控制其行为。