call

返回值：self​

self（便于链式调用）

细节​

将回调添加到时间轴的末尾（或使用position参数）——这是一种便捷方法，功能与以下内容完全相同：add(gsap.delayedCall(...))但代码更少。换句话说，以下两行代码会产生相同的结果：

function myFunction(param1, param2) {
  //...
}
tl.add(gsap.delayedCall(0, myFunction, ["param1", "param2"]));
tl.call(myFunction, ["param1", "param2"]);

这与使用onComplete时间线自身的特殊属性不同，因为一旦你添加了回调函数，它就会固定在当前位置，而一个onComplete总是在时间线的末尾被调用。

例如，如果一个时间线包含了一个持续时间为1秒的补间动画，然后你call(myFunction)，它将被放置在1秒的位置。如果你再添加一个持续时间为1秒的补间动画，时间线的总时长现在变为2秒，但myFunction回调仍会在1秒的位置被调用。而一个onComplete将在结尾（2秒处）被调用。

请注意，你可以将这些调用连在一起，并使用其他便捷方法如to(), fromTo(), set()等快速构建序列：

//create a timeline that calls myFunction() when it completes
var tl = gsap.timeline({ onComplete: myFunction });

//now we'll use chaining, but break each step onto a different line for readability...

//tween element's x to 100
tl.to(element, { duration: 1, x: 100 })

  //then call myCallback()
  .call(myCallback)

  //then set element.opacity to 0.5 immediately
  .set(element, { opacity: 0 })

  //then call otherFunction("param1", "param2")
  .call(otherFunction, ["param1", "param2"])

  //finally tween the rotation of element1, element2, and element3 to 45 and stagger the start times by 0.25 seconds
  .to([element1, element2, element3], {
    duration: 1.5,
    rotation: 45,
    stagger: 0.25,
  });

在时间线中定位调用​

默认情况下，调用会被添加到时间线的end末尾position参数来精确控制元素放置的位置。它使用灵活的语法，包括以下选项：

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

  // insert exactly 3 seconds from the start of the timeline
  tl.call(myFunction, null, 3);
  

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

  // insert at the "someLabel" label
  tl.call(myFunction, null, "someLabel");
  

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

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

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

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

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

位置参数交互式演示​

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