使用GSAP同时播放两个Tween动画？

Question

使用GSAP同时播放两个Tween动画？

5

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

示例：

tl = gsap.timeline();

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

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

- Massimo Cilluffo

2个回答

1

你可以添加一个标签来标识时间轴上的特定点。请参见.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");`

- Louys Patrice Bessette

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Saucier · Accepted Answer

首先，在GSAP 3中，我们不建议使用duration参数。相反，我们建议将duration包含在vars参数内，这样您就可以使用GSAP的defaults functionality等功能。有关升级到GSAP 3的更多信息，请参见迁移指南。出于问题的考虑，我在下面省略了duration。

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

Often times I find that the easiest way to do this is to use the '<' position parameter operator. This causes a tween to start at the same start position as the last tween. For example:
```
.to('EL1', { prop: value })
.to('EL2', { prop: value }, '<')
```

Use a label. There are a couple of ways you could create a label:

.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

Or explicitly create it:

.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

Use a relative offset. This only works if you also use the duration of the previous tween also:

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

Use an explicit time in the timeline. I pretty much only use this method when I want the tweens to start at the beginning of the timeline:
```
.to('EL1', { prop: value })
.to('EL2', { prop: value }, 0) // Number of seconds in the timeline to start at - can be any number
```
In some circumstances you might have multiple pre-made animations that you want to fire at the same time as part of a timeline. In that case you might want to add a function that fires both at a particular time like so:
```
.add(() => {
  myAnim1.play();
  myAnim2.play();
})
```
Note that this approach doesn't actually add the tweens to the timeline, it just uses a function that's a part of the timeline to play the animations.

You could instead add the tweens themselves to the timeline using two separate .add() calls. This is also what you should do if you want to sequence pre-made animations as part of a timeline. To position them, use the same approaches covered in the other points above.
```
.add(myAnim1)
.add(myAnim2, '<')
```

更多解释请参见位置参数文章。