返回值：self​

self（便于链式调用）

细节​

将补间动画、时间轴、回调函数或标签（或它们的数组）添加到时间轴中。

在时间线中定位动画​

默认情况下，动画会被添加到end时间轴的末尾，以便它们依次一个接一个地播放，但你可以使用position参数来精确控制元素放置的位置。它使用灵活的语法，包括以下选项：

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

  // insert exactly 3 seconds from the start of the timeline
  tl.add(animation, 3);
  

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

  // insert at the "someLabel" label
  tl.add(animation, "someLabel");
  

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

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

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

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

• 一个复杂的字符串，其中"+="和"-="前缀表示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版本中加入的
**“前一个动画”指的是最近插入的动画，不一定是离时间轴末尾最近的那个动画。

位置参数交互式演示​

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