GreenSock GSAP：不同属性的多重简化？

Question

我有一个从左上角到屏幕中央的动画元素：

TweenMax.to($("#char"), 1, {top: "50%", left:"50%", ease:Power1.easeOut});

这会在直线上进行动画处理，并进行一些缓动。我想要的是一个遵循这条路径的更循环的动画：

所以我必须使用多个 TweenMax.to() 调用，每个调用都有不同的缓动：

TweenMax.to($("#char"), 1, {top: "50%", ease:Circ.easeIn});
TweenMax.to($("#char"), 1, {left:"50%", ease:Circ.easeOut});

有没有办法在单个 TweenMax.to() 调用中为每个属性分配不同的缓动？大概是这样的吧？

TweenMax.to($("#char"), 1, [{top: "50%", ease:Circ.easeIn}, {left:"50%", ease:Circ.easeOut}]);

我查看了他们所有的文档，似乎我只能通过一个适用于所有属性的 ease。

Answer 1

如果你想获得曲线，我不认为多重缓动是你应该寻找的。

有一个 BezierPlugin which, IMHO, should help you create a curved path. Take a look at an overly simplified jsFiddle 我创建的。其中代码如下：

var div=document.querySelector('div');
TweenMax.fromTo(div, 2, {position: 'absolute', top: '0%', left: '0%'}, {bezier: {type: 'soft', values: [{top: '0%', left: '50%'}, {top: '50%', left: '50%'}], autoRotate: true}, ease: Power2.easeInOut});

GreenSock GSAP：不同属性的多重简化？

GreenSock GSAP: Multiple eases for different attributes?

javascript

animation

gsap