如何使用GSAP动画/停放自上而下的汽车

我只是尝试使用GSAP库TweenMax和TimelineMax进行一些操作。如何使用GSAP动画/停放自上而下的汽车

我想要完成的是一个90度角的汽车停车场。但我不确定需要什么样的数学才能使它看起来真实。

我已经有了这个小提琴，我尝试了一个转弯，但它看起来更像是汽车在漂流。

有什么建议吗？

timeline.to(car, 2, { 
      x: "-=300", y: "+=300", ease: Linear.easeNone 
     }).to(car, 0.25, { 
      x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone 
     }).to(car, 0.25, { 
      x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone 
     }).to(car, 0.25, { 
      x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone 
     }).to(car, 0.25, { 
      x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone 
     }).to(car, 0.25, { 
      x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone 
     });

来源

2017-08-16 Cas

Your fiddle is not linked。

GSAP的TweenMax包含一个Bezier插件，它允许对象沿着一条路径移动，而这正是您想要的，而不是谨慎的值，这就是您所拥有的。

TweenMax.to(car, 2, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone})

Documentation

Example

来源

2017-08-16 16:14:57

[小提琴]（https://jsfiddle.net/1nqk27f1/4/）是的，我试过，但与贝塞尔函数，我在麻烦使用autoRotate。汽车在整个过程中都需要面对同样的方式。我放弃了使用bezier，所以我可以使用directionalRotation。 – Cas

我明白你的意思是关于漂流。看起来你真的很接近。事实上，问题并非事实上汽车在整个过程中都面临同样的问题？如果它朝着它朝前的方向略微旋转，那么它看起来不像滑行/漂移。当你在现实生活中停车时，方向肯定会改变。 –

是的，所以我要么[这个小提琴]（https://jsfiddle.net/1nqk27f1/1/），我可以在那里控制自己的方向，但动画不平滑的地方。或者[这个小提琴]（https://jsfiddle.net/1nqk27f1/4），动画很流畅，但我无法控制汽车进入的方向，实际上我需要一些东西。 – Cas

如何使用GSAP动画/停放自上而下的汽车

回答

相关问题