GSAP中文文档 - timeline 方法 - 插入暂停（addPause）

插入暂停（addPause）

在特定时间或标签处插入一个特殊回调，暂停时间线的播放。

方法签名

addPause( position: [String | Number | Label], callback: Function, params: Array ): self

在特定时间或标签处插入一个特殊回调，暂停时间线的播放。

参数（Parameters）

• position: [String | Number | Label]

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

• callback: Function

  • （默认值为 null）一个可选的回调函数，当时间线暂停后立即调用。

• params: Array

  • （默认值为 null）一个可选的参数数组，传递给回调函数。

返回值（Returns）

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

详细信息（Details）

插入一个特殊回调，在特定时间或标签处暂停时间线的播放。这个方法比使用您自己的简单回调更准确，因为它确保即使虚拟播放头已经稍微超过了暂停位置，它也会被移回到精确的正确位置。

记住，虚拟播放头在核心计时机制的每个刻度（帧）上移动到新位置，所以有可能，例如，它在 0.99 处，然后下一个渲染发生在 1.01 处，所以如果您的回调恰好在 1 秒处，播放头（在这个例子中）会稍微超过您想要暂停的位置。然后，如果您 reverse()，它会再次运行到那个回调并几乎立即暂停。

然而，如果您使用 addPause() 方法，它将校准事物，以便当回调被击中时，它会将播放头移回确切的位置。因此，如果您 reverse()，它不会再次运行到同一个回调。

示例代码（Example Code）

// 在时间线的确切2秒处插入暂停
timeline.addPause(2)

// 在 "yourLabel" 标签处插入暂停
timeline.addPause('yourLabel')

// 在 "yourLabel" 后3秒处插入暂停，当暂停发生时，调用 yourFunction
timeline.addPause('yourLabel+=3', yourFunction)

// 在确切4秒处插入暂停，然后调用 yourFunction 并传递给它2个参数，"param1" 和 "param2"
timeline.addPause(4, yourFunction, ['param1', 'param2'])

特殊回调只是一个零持续时间的补间，它使用 onComplete，所以技术上这个回调就像任何其他回调一样，它被认为是时间线的一个子元素。要移除通过 addPause() 添加的暂停，请使用 timeline.removePause()。

在时间线上定位暂停

使用位置参数精确控制暂停的位置。它使用灵活的语法，具有以下选项：

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

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

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

// 在 "someLabel" 标签处插入
tl.addPause('someLabel')

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

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

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

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

• 一个复杂的字符串，其中 "+=" 和 "-=" 前缀表示相对值。当一个数字跟随 < 或 ">" 时，它被解释为相对的，所以 "<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 中添加的

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

位置参数交互式演示

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