如何使用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動畫/停放自上而下的汽車

回答

相關問題