如何使用 GreenSock 同时为 2 个或更多元素设置动画？

Question

我想使用 Green Sock 同时为两个不同的元素制作动画。我如何修改下面的代码，使它们同时执行准确的动画，而不是一个接一个地执行？

tlProject = new TimelineMax({});    

tlProject.from($animated_bowl, 2, {opacity: 0, scale: 0, ease: Bounce.easeOut})
    .from($animated_bowl_shadow, 2, {opacity: 0, scale: 0, ease: Bounce.easeOut});

谢谢！

Answer 1

.from(), .to() and .fromTo() methods of TimelineMax 可以采用额外的 position 参数来控制补间的位置。

对于您的具体情况，您只需告诉每个补间从 0（零）开始。

tlProject = new TimelineMax();
tlProject.from($animated_bowl, 2, {opacity: 0, scale: 0, ease: Bounce.easeOut}, 0)
    .from($animated_bowl_shadow, 2, {opacity: 0, scale: 0, ease: Bounce.easeOut}, 0);

查看这个很棒的教程，以更好地了解 position 参数的工作原理以及您可以使用它执行的所有操作：https://greensock.com/position-parameter.

另一种选择是同时传递两个元素，因为 target

tlProject = new TimelineMax();
tlProject.from([$animated_bowl, $animated_bowl_shadow], 2, {opacity: 0, scale: 0, ease: Bounce.easeOut});

如何使用 GreenSock 同时为 2 个或更多元素设置动画？

How to animate 2 or more elements at the same time using GreenSock?

jquery

gsap