jquery - 如何使用 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 .

另一种选择是同时传递两个元素，作为目标

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