如何使用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()，.fromTo()和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});