Wie man ein Top-Down-Auto mit GSAP animiert/parkt

Ich versuche gerade ein paar Dinge mit den GSAP-Bibliotheken TweenMax und TimelineMax.Wie man ein Top-Down-Auto mit GSAP animiert/parkt

Was ich erreichen möchte, ist ein Autoparkplatz nach unten in einem Winkel von 90 Grad. Aber ich bin mir nicht sicher, welche Art von Mathe dafür nötig ist, damit es authentisch aussieht.

Ich habe diese Geige, in der ich einen Zug versuche, aber es sieht eher aus wie das Auto treibt.

Irgendwelche Vorschläge?

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 
     });

Quelle

2017-08-16 Cas

Ihre Geige ist nicht verbunden.

GSAPs TweenMax enthält ein Bezier-Plugin, mit dem Objekte sich entlang eines Pfades bewegen können, was Sie wünschen, anstatt diskrete Werte, die Sie haben.

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

Documentation

Example

Quelle

2017-08-16 16:14:57

[Fiddle] (https://jsfiddle.net/1nqk27f1/4/) Ja, habe ich versucht, das, aber mit der Bezier-Funktion, ich habe Probleme mit der autoRotate. Das Auto muss die ganze Zeit auf dieselbe Weise fahren. Ich habe aufgegeben, den Bezier zu verwenden, damit ich directionRotation benutzen konnte. – Cas

Ich sehe was du über das Driften meinst. Es sieht so aus, als ob du wirklich nah dran bist. Liegt das Problem nicht in der Tatsache, dass das Auto die ganze Zeit in dieselbe Richtung fährt? Wenn es sich leicht in die Richtung drehte, in die es sich bewegte, sah es nicht so aus, als würde es rutschen/driften. Wenn Sie ein Auto im wirklichen Leben parken, ändert sich die Richtung sicher. –

Ja, also ich habe entweder [diese Geige] (https://jsfiddle.net/1nqk27f1/1/), wo ich die Richtung selbst steuern kann, aber wo die Animation nicht glatt ist. Oder [diese Geige] (https://jsfiddle.net/1nqk27f1/4), wo die Animation glatt ist, aber ich kann nicht die Richtung steuern, in die das Auto hineingeht. Ich brauche tatsächlich etwas dazwischen. – Cas

Wie man ein Top-Down-Auto mit GSAP animiert/parkt

Antwort

Verwandte Themen