与 GSAP 并行播放 2 个补间？

Question

谁能简单解释一下使用 GSAP 3 在同一时间线中并行播放 2 tweens/animations 的最佳方式是什么？

示例：

tl = gsap.timeline();

tl
.to( 'EL1', 1, {
   prop: value,
})
.to( 'EL2', 1, {
   prop: value
}, '-=1');

我会这样做：'-=1'。大家有更好的解决方案吗？

Answer 1

您可以添加 label 来标识时间轴的特定点。请参阅 .add() 方法。

tl = gsap.timeline();

tl
.add("anim_start", "+=0") // Here is your label.
.to( 'EL1', 1, {
   prop: value,
}, "anim_start")
.to( 'EL2', 1, {
   prop: value
}, "anim_start");

所以这两个补间将同时开始。

您甚至可以“延迟”绑定到该标签的一整套补间...就像标签上的“+=2”（而不是每个补间）一样。 ;)

你也可以有一个相对于标签延迟的补间！喜欢：

to( 'EL1', 1, {
   prop: value,
},"anim_start+=2");`

Answer 2

首先，在 GSAP 3 中，我们不建议使用持续时间参数。相反，我们建议在 vars 参数中包含持续时间，以便您可以使用 GSAP 的 defaults functionality. For more info on upgrading to GSAP 3, see the migration guide 等功能。为了这个问题，我在下面省略了持续时间。

有很多方法可以确保两个补间同时开始：

我经常发现最简单的方法是使用'<' 位置参数运算符。这会导致补间从与上一个补间相同的起始位置开始。例如：
```
.to('EL1', { prop: value })
.to('EL2', { prop: value }, '<')
```

使用标签。您可以通过多种方式创建标签：

.to('EL1', { prop: value }, 'myLabel') // If the label doesn't exist, it will be created at the start of this tween
.to('EL2', { prop: value }, 'myLabel') // Since the label exists already, this tween will be positioned with its start at the label

或显式创建它：

.add('myLabel') // .addLabel() also works
.to('EL1', { prop: value }, 'myLabel') // If the label doesn't exist, it will be created at the start of this tween
.to('EL2', { prop: value }, 'myLabel') // Since the label exists already, this tween will be positioned with its start at the label

使用相对偏移量。这仅在您还使用前一个补间的持续时间时才有效：

.to('EL1', { prop: value })
.to('EL2', { prop: value }, '-=1') // Assuming the duration of the previous tween is 1

在时间轴中使用明确的时间。我几乎只在我希望补间从时间线的开头开始时才使用此方法：

.to('EL1', { prop: value })
.to('EL2', { prop: value }, 0) // Number of seconds in the timeline to start at - can be any number

在某些情况下，您可能有多个预制动画要作为时间轴的一部分同时触发。在这种情况下，您可能想要 添加一个在特定时间触发两者的函数 如下所示：
```
.add(() => {
  myAnim1.play();
  myAnim2.play();
})
```
请注意，此方法实际上并未将补间添加到时间轴，它只是使用作为时间轴一部分的函数来播放动画。

您可以改为使用两个单独的 .add() 调用将补间本身添加到时间轴。如果您想 序列化 预制动画作为时间轴的一部分，这也是您应该做的。要定位它们，请使用上面其他点中介绍的相同方法。
```
.add(myAnim1)
.add(myAnim2, '<')
```

有关更多说明，请参阅 the position parameter post。

与 GSAP 并行播放 2 个补间？

Play 2 tweens in parallel with GSAP?

javascript

animation

gsap

timeline