✔ Div im Bogen nach oben

[ThiKool]

Hallo Leute,

ich möchte mit javascript ein Div animieren, das von einem bestimmten Startpunkt zu einem definierten Zielpunkt im Bogen wandern soll.

Zielpunkt ist immer:

X: 800px
Y: 100px

Startpunkt ist variabel.

Ich hab jetzt schon etwas mit Math.Sin und Cos experimentiert, allerdings schlägt der Bogen immer erst extrem nach links aus bevor er hoch geht.

Am liebsten wäre es mir, wenn das div erste eher hochwandert und dann nach rechts und eben nicht nach links ausschlägt, so wie auf der Zeichnung (Anhang).

Ausserdem hab ich da noch ein Problem mit dem variablen Startpunkt.

Irgendwie steh ich auf dem Schlauch (könnte allerdings auch mit meinen schlechten Mathekenntnissen zusammenhängen )

Danke euch!

 

[sheel]

Hi

Java!=JavaScript
Bisher wusstest du das doch auch...

Wenn du deinen aktuellen Code herzeigst kann man dir am Besten helfen

 

[Sempervivum]

Für den Bogen könnte man eine Ellipse verwenden:
http://www.mathematische-basteleien.de/ellipse.htm
Dort ist die Gleichung angegeben. Die Parameter a und b kann man aus Start- und Zielpunkt x1/y1 und x2/y2 ermitteln.

 

[Sempervivum]

Vielleicht geht es auch viel einfacher: Die Position mit jQuery animieren und geeignete Easings verwenden:
http://jsfiddle.net/Sempervivum/ewj54fLo/
Ein bisschen ruckelig, vielleicht könnte man die Performance verbessern, wenn man es mit CSS animiert.

 

[ThiKool]

Vielleicht geht es auch viel einfacher: Die Position mit jQuery animieren und geeignete Easings verwenden:
http://jsfiddle.net/Sempervivum/ewj54fLo/
Ein bisschen ruckelig, vielleicht könnte man die Performance verbessern, wenn man es mit CSS animiert.

AWESOME!!!
Damit gehts ja super leicht!
Genau das was ich gesucht habe, vielen Dank (ich hab mich echt schon einige Stunden damit abgemüht)

@sheel: hatte ich Java geschrieben? Sorry

 

[ThiKool]

Ok aber doch ein bisschen "schwer", da ich ja zusätzlich die jquery-ui laden muss.

Kann ich mir aus der UI nur den ease Part extrahieren - oder sollte ich doch eher mit CSS animieren?

 

[SpiceLab]

@sheel: hatte ich Java geschrieben? Sorry

Nein, sondern die Frage im Java-Forum gestellt.

 

[Sempervivum]

Ok aber doch ein bisschen "schwer", da ich ja zusätzlich die jquery-ui laden muss.
Kann ich mir aus der UI nur den ease Part extrahieren - oder sollte ich doch eher mit CSS animieren?

Anscheinend gibt es auch ein easing-Plugin:
http://gsgd.co.uk/sandbox/jquery/easing/
Der Code ist leicht zu lesen und Du könntest außer den beiden sine-Easings alles andere löschen.
Oder Du stellst auf CSS um, dann kann es der Browser und Du brauchst gar kein Plugin.

 

[SpiceLab]

http://easings.net/de bietet zudem eine Übersicht aller möglichen Übergangsfunktionen.

Ob sich die Animation mit CSS noch geschmeidiger gestalten lässt, müsste von @ThiKool in einem gesonderten Fall selbst getestet/überprüft werden.

Ich vermute aber eher nicht.

 

[ThiKool]

Perfekt, vielen Dank euch allen! Ich werds später nochmal mit CSS testen!