addPause

返回值：self​

self（便于链式调用）

细节​

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

请记住，虚拟播放头在核心计时机制的每一帧（tick）都会移动到新位置，因此有可能例如在0.99的位置，下一渲染发生在1.01的位置，所以如果你的回调正好在1秒的位置，播放头（在这个例子中）会略微超过你想要暂停的位置。reverse()然后，如果你

但是，如果你使用的是addPause()方法，它会进行校准，使得当回调触发时，播放头会被移回到完全正确的位置。因此，如果你reverse()就不会再次触发同一个回调。

//insert a pause at exactly 2 seconds into the timeline
timeline.addPause(2);

//insert a pause at "yourLabel"
timeline.addPause("yourLabel");

//insert a pause 3 seconds after "yourLabel" and when that pause occurs, call yourFunction
timeline.addPause("yourLabel+=3", yourFunction);

//insert a pause at exactly 4 seconds and then call yourFunction and pass it 2 parameters, "param1" and "param2"
timeline.addPause(4, yourFunction, ["param1", "param2"]);

这个特殊回调只是一个使用了onComplete的零持续时间动画，因此从技术上讲，这个回调和其他任何回调一样，并且被视为时间轴的一个子元素。要移除通过addPause()使用timeline.removePause().

在时间轴中定位暂停​

使用position参数来精确控制暂停放置的位置。它使用灵活的语法，包含以下选项：

• 绝对时间（以秒为单位）从时间轴起点开始测量，作为数值比如3

  // insert exactly 3 seconds from the start of the timeline
  tl.addPause(3);
  

• 标签，例如"someLabel". 如果标签不存在，它将被添加到时间轴的结尾。

  // insert at the "someLabel" label
  tl.addPause("someLabel");
  

• "<"这个start前一个动画的结束位置**。可以将其想象成对<作为一个指向之前动画起点的指针。

  // insert at the START of the  previous animation
  tl.addPause("<");
  

• ">"- 变量end前一个动画的起始位置**。可以将其想象成对>作为一个指向之前动画结束位置的指针。

  // insert at the END of the previous animation
  tl.addPause(">");
  

• 一个复杂的字符串，其中"+="和"-="前缀表示relative值。当数字紧跟在"<"或者">"后面时，会解释为相对值，所以"<2"等同于"<+=2".示例：

  • "+=1"- 时间轴结束位置之后的1秒（产生空隙）
  • "-=1"- 时间轴结束位置之前的1秒（重叠）
  • "myLabel+=2"- 标签之后的2秒"myLabel"
  • "<+=3"- 前一个动画起点之后的3秒
  • "<3"- 等同于"<+=3"（见上方）("+="在紧随"<"或者">")
  • ">-0.5"- 前一个动画结束前的0.5秒。相当于说"前一个动画的结束加上-0.5"

• 基于百分比的复杂字符串。当紧跟着"+="或者"-="前缀时，该百分比基于的是总持续时间的正在被插入的动画。如果紧接着的是"<"或者">"，则百分比基于的是总持续时间的前一个动画. 注意：总持续时间包括重复/往返效果。示例：

  • "-=25%"- 与时间轴末端重叠，重叠时间为插入动画总持续时间的25%
  • "+=50%"- 超出时间轴末端，超出时间为插入动画总持续时间的50%，形成间隙
  • "<25%"- 前一个动画开始后的25%处。等价于">-75%"即从前一个动画的结束位置向前的-75%end前一个动画的结束位置**。
  • "<+=25%"- 插入动画总持续时间的25%后从前一个动画的起始位置开始。不同于"<25%"，其百分比基于的是前一个动画的总持续时间，而任何紧跟在"+="或者"-="后的内容都基于插入动画的总持续时间。
  • "myLabel+=30%"- 插入动画总持续时间的30%后从标签位置开始"myLabel".

*基于百分比的值是在GSAP 3.7.0版本中加入的
**“前一个动画”指的是最近插入的动画，不一定是离时间轴末尾最近的那个动画。

位置参数交互式演示​

务必阅读我们的教程理解位置参数其中包括交互式时间轴可视化展示和视频。