javascript - 与 GSAP 并行播放 2 个补间？

Question

有人可以简要解释一下使用 在同一时间线中并行播放 2 个补间动画/动画的最佳方法是什么吗？ GSAP 3 ?
例子:

tl = gsap.timeline();

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

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

Answer 1

首先，在 GSAP 3 中，我们不建议使用持续时间参数。相反，我们建议在 vars 参数中包含持续时间，以便您可以使用 GSAP 的 defaults functionality 等功能。 .有关升级到 GSAP 3 的更多信息，请参阅 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 .