与 GSAP 并行播放 2 个补间？

编程问答 2022-05-31

问题描述

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

示例：

binding.progressBarWText.root.visibility = View.GONE

我会这样做：tl = gsap.timeline(); tl .to( 'EL1',1,{ prop: value,}) .to( 'EL2',{ prop: value },'-=1'); 。大家有没有更好的方案给我？

解决方法

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

tl = gsap.timeline();

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

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

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

而且您也可以相对于标签延迟一个补间！喜欢：

to( 'EL1',"anim_start+=2");`
,

首先，在 GSAP 3 中，我们不建议使用持续时间参数。相反，我们建议在 vars 参数中包含持续时间，以便您可以使用 GSAP 的 defaults functionality 等功能。有关升级到 GSAP 3 的更多信息，请参阅 the migration guide。为了这个问题，我在下面省略了持续时间。

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

  1. 我经常发现最简单的方法是使用 '<' 位置参数运算符。这会导致补间在与最后一个补间相同的起始位置开始。例如：

    .to('EL1',{ prop: value })
.to('EL2',{ prop: value },'<')

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

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

    或者显式创建它：

    .add('myLabel') // .addLabel() also works
.to('EL1',this tween will be positioned with its start at the label

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

    .to('EL1','-=1') // Assuming the duration of the previous tween is 1

  4. 在时间轴中使用明确的时间。当我希望补间从时间线的开头开始时，我几乎只使用这种方法：

    .to('EL1',0) // Number of seconds in the timeline to start at - can be any number

  5. 在某些情况下，您可能希望将多个预制动画作为时间线的一部分同时触发。在这种情况下，您可能希望添加一个在特定时间同时触发的函数，如下所示：

    .add(() => {
  myAnim1.play();
  myAnim2.play();
})

    请注意，这种方法实际上并未将补间添加到时间轴，它只是使用作为时间轴一部分的函数来播放动画。

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

    .add(myAnim1)
.add(myAnim2,'<')

更多解释见the position parameter post。

animationanimationgsapjavascripttimeline