[JavaScript] jQuery Div Anhang eines Pfades wandern lassen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von badloader, 19. Februar 2013 .

  1. 19. Februar 2013
    jQuery Div Anhang eines Pfades wandern lassen

    Hi,,

    ich möchte ein Div anhand eines pfades (einer funktion) von a nach b wandern lassen.

    Funktion = 4sin(2x)

    Startpunkt und Endpunkt werden kontrolliert:

    Startpunkt ist aktuelle Position
    Endpunkt ist bestimmte x Koordinate.
    Ansonsten soll das div Element entlang des Pfades wandern.


    Die Animate Funktion bringt mich zwar von a nach b aber nicht Anhand eines Pfades. Hab dazu auch nichts gefunden.
     
  2. 19. Februar 2013
    Zuletzt bearbeitet: 19. Februar 2013
    AW: jQuery Div Anhang eines Pfades wandern lassen

    Eine einfache Möglichkeit wäre eine CSS-Animation zu nutzen.

    Code:
    @keyframes move {
     0% { top: 10px; left: 10px; }
     50% { top: 50px; left: 500px; }
     100% { top: 100px; left: 10px; }
    }
    Damit würde dein Element von x:10 y:10 nach x:500 y:50 und dann nach x:10 y:100 wandern.

    So eine Animation kannst du auch mit JavaScript erzeugen. Einfach mit deinem Algo die Wegpunkte ausrechnen, den CSS-Code generieren und die Animation dem Element hinzufügen.

    Vorteil gegenüber jQuery:
    Die Animation wird auf der GPU berechnet und läuft daher ziemlich flott und flüssig.

    Wenn du die Animation aber rein mit JavaScript ausführen willst, kannst du auf requestAnimationFrame zurückgreifen und bei 60 Frames in der Sekunde dein Element selber rendern lassen.

    Dann musst du dich aber selbst um die Timing-Funktion kümmern.

    Nachteil:
    Handheld Geräten geht bei DOM Animationen recht schnell die Puste aus. (Nicht verwechseln mit Canvas)

    Um die Performance zu steigern empfiehlt es sich hier mit CSS-Transforms zu arbeiten und statt `top` und `left` entsprechend `translateY` und `translateX` zu nutzen.

    CSS-Transforms laufen in der Regel nämlich ebenfalls über die GPU.
     
  3. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.