如何使用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});