如何使用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
});
答
Your fiddle is not linked。
GSAP的TweenMax包含一个Bezier插件,它允许对象沿着一条路径移动,而这正是您想要的,而不是谨慎的值,这就是您所拥有的。
TweenMax.to(car, 2, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone})
[小提琴](https://jsfiddle.net/1nqk27f1/4/) 是的,我试过,但与贝塞尔函数,我在麻烦使用autoRotate。汽车在整个过程中都需要面对同样的方式。我放弃了使用bezier,所以我可以使用directionalRotation。 – Cas
我明白你的意思是关于漂流。看起来你真的很接近。事实上,问题并非事实上汽车在整个过程中都面临同样的问题?如果它朝着它朝前的方向略微旋转,那么它看起来不像滑行/漂移。当你在现实生活中停车时,方向肯定会改变。 –
是的,所以我要么[这个小提琴](https://jsfiddle.net/1nqk27f1/1/),我可以在那里控制自己的方向,但动画不平滑的地方。或者[这个小提琴](https://jsfiddle.net/1nqk27f1/4),动画很流畅,但我无法控制汽车进入的方向,实际上我需要一些东西。 – Cas