GSAP中文文档 - timeline 方法 - 添加(add)

add

向时间线添加补间、时间线、回调或标签（或它们的数组）。

方法签名

add( child: [Tween | Timeline | Label | Callback | Array], position: [Number | String | Label] ): self

[覆盖] 向时间线添加补间、时间线、回调或标签（或它们的数组）。

参数（Parameters）

• child: [Tween | Timeline | Label | Callback | Array]

  • 要添加的补间、时间线、回调或标签（或它们的数组）。

• position: [Number | String | Label]

  • （默认值为 "+=0"）控制时间线上的插入点（默认情况下，它是时间线的末尾）。详见下面的选项，或参考位置参数文章，其中包含交互式时间线可视化和视频。如果定义了一个尚不存在的标签，它将自动被添加到时间线的末尾。

返回值（Returns）

• self
  • 返回实例本身，便于链式调用。

详细信息（Details）

向时间线添加补间、时间线、回调或标签（或它们的数组）。

在时间线上定位动画

默认情况下，动画被添加到时间线的末尾，以便它们一个接一个地顺序播放，但您可以使用位置参数精确控制它们的位置。它使用灵活的语法，具有以下选项：

• 绝对时间（以秒为单位），从时间线的开始测量，作为一个数字，如 3

// 从时间线的开始处精确插入3秒
tl.add(animation, 3)

• 标签，如 "someLabel"。如果标签不存在，它将被添加到时间线的末尾。

// 在 "someLabel" 标签处插入
tl.add(animation, 'someLabel')

• "<" 前一个动画的开始。将 < 视为指向前一个动画开始的指针。

// 在前一个动画的开始处插入
tl.add(animation, '<')

• ">" 前一个动画的结束。将 > 视为指向前一个动画结束的指针。

// 在前一个动画的结束处插入
tl.add(animation, '>')

• 一个复杂的字符串，其中 "+=" 和 "-=" 前缀表示相对值。当一个数字跟随 < 或 ">" 时，它被解释为相对的，所以 "<2" 与 "<+=2" 相同。示例：

  • "+=1" - 比时间线结束早1秒（创建间隙）
  • "-=1" - 比时间线结束晚1秒（重叠）
  • "myLabel+=2" - 比标签 "myLabel" 晚2秒
  • "<+=3" - 比前一个动画的开始晚3秒
  • "<3" - 与 "<+=3" 相同（见上文）（当跟随 < 或 ">" 时，"+=" 是隐含的）
  • ">-0.5" - 比前一个动画的结束早0.5秒。就像说 "前一个动画的结束加上 -0.5"

• 一个基于百分比的复杂字符串。当紧跟 "+=" 或 "-=" 前缀时，百分比是基于被插入动画的总持续时间。当紧跟 < 或 ">" 时，它是基于前一个动画的总持续时间。注意：总持续时间包括重复/悠悠。示例：

  • "-=25%" - 与时间线结束重叠，重叠部分为插入动画总持续时间的25%
  • "+=50%" - 超过时间线结束，超过部分为插入动画总持续时间的50%，创建间隙
  • "<25%" - 从前一个动画的开始25%处。与 ">-75%" 相同，即从前一个动画的结束处负75%
  • "<+=25%" - 从前一个动画的开始处插入动画总持续时间的25%。与 "<25%" 不同，后者的百分比是基于前一个动画的总持续时间，而任何紧跟 "+=" 或 "-=" 的都基于插入动画的总持续时间。
  • "myLabel+=30%" - 从标签 "myLabel" 处插入动画总持续时间的30%

*基于百分比的值是在 GSAP 3.7.0 中添加的

“前一个动画” 指的是最近插入的动画，而不一定是最接近时间线末尾的动画。

位置参数交互式演示

务必阅读我们的教程《理解位置参数》，其中包含交互式时间线可视化和视频。