Ergebnis 1 bis 9 von 9
  1. #1
    Avatar von jspit
    jspit ist offline Lounge-Member
    registriert
    19-06-2009
    Beiträge
    1.710

    flüssige Animationen mit dem requestAnimationFrame

    Hi,
    ruckelfreie Animationen mit setInterval und setTimeout zu erstellen wird schwer, wenn mehrere Animationen gleichzeitig laufen.
    Hier Performantere JavaScript-Animationen mit requestAnimationFrame werden die Vorteile des requestAnimationFrame kurz vorgestellt.
    Ich habe ein wenig experimentiert und möchte ein kleines Beispiel vorstellen:

    Code:
    (function(id,start_width,stop_width,step){
      (function callback(){
        document.getElementById(id).style.width = (start_width) + "px"; 
        start_width += step; 
        if(start_width < stop_width) window.requestAnimationFrame(callback);
        })();
    })('test',60,300,1);
    Das ganze ist eine anonyme Funktion, welche ein Element mit der id 'test' (1.Parameter) mit einer Startbreite von 60 px (2.Parameter) bis zu einer Breite von 300 (3.Parameter) animiert. Der 4 Parameter ist die Schrittweite.

    Das kleine Beispiel für andere Animationen zu modifizieren sollte nicht schwer sein.

    Mit dem Onlinetest kann ein wenig mit den Parametern experimentiert werden. Ebenso kann so schnell ermittelt werden, mit welchen Browsern dies gut läuft.

    LG jspit
    Geändert von jspit (28-02-2014 um 07:19 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: flüssige Animationen mit dem requestAnimationFrame

    Da auch requestAnimationFrame mal etwas hängen kann, sollte man auch hier seine Schrittweite nicht fest pro Funktionsaufruf, sondern fest pro Zeiteinheit wählen.

    PS: arguments.callee ist deprecated. Gib' deiner inneren Funktion doch einen Namen, dann kannst du den für das requestAnimationFrame() verwenden.
    PPS: ich verwende für Animationen das:
    Code:
    var requestAnimationFrame =
    	window.requestAnimationFrame ||
    	window.mozRequestAnimationFrame ||
    	window.webkitRequestAnimationFrame ||
    	window.oRequestAnimationFrame ||
    	window.khtmlRequestAnimationFrame ||
    	window.msRequestAnimationFrame ||
    	function(callback){
    		return window.setTimeout(callback, 50);
    	};

  3. #3
    Avatar von jspit
    jspit ist offline Lounge-Member
    registriert
    19-06-2009
    Beiträge
    1.710

    AW: flüssige Animationen mit dem requestAnimationFrame

    Die Framerate vom requestAnimationFrame kann nicht hängen wie beim setTimeout, kann aber runtergesetzt werden wenn notwendig. Da besteht ein feiner Unterschied. Die Framerate wird so gewählt (Erfahrungswert bei 16ms), das die Rate mit dem Rendern des Bildschirminhaltes gewissermaßen synchronisiert wird. Dadurch wird eine flüssige Darstellung erreicht. Das bedeutet jedoch nicht, das die Animation immer mit gleicher Geschwindigkeit erfolgt.
    Für das obige Beispiel bedeutet das, der Balken kann auch mal langsamer wachsen.
    Dies durch eine Schrittweitenanpassung zu kompensieren, nicht anderes meint kkapsner, ist nicht ganz so einfach wie es auf den ersten Blick erscheint.
    Denn der requestAnimationFrame pausiert bei Verlassen des Browsertabs mit seiner Animation um Gegensatz zum setTimeout, welcher weiterläuft.
    Das zu Berücksichtigen bedeutet entsprechende Events zu erstellen, welche in die Schrittweitenanpassung eingreifen.

    Das mit arguments.callee hab ich mal geändert, sieht so auch optisch besser aus.

    LG jspit

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: flüssige Animationen mit dem requestAnimationFrame

    Zitat Zitat von jspit Beitrag anzeigen
    Das bedeutet jedoch nicht, das die Animation immer mit gleicher Geschwindigkeit erfolgt.
    die animation sollte nicht von dem willkürlichen aufrufzeitpunkt des callbacks abhängig sein, weder bei setTimeout noch bei requestAnimationFrame. bei beiden ist ein zeitpunkt nicht definiert.

    Zitat Zitat von jspit Beitrag anzeigen
    Für das obige Beispiel bedeutet das, der Balken kann auch mal langsamer wachsen.
    wenn das nicht beabsichtigt ist, sollte man das beheben


    Zitat Zitat von jspit Beitrag anzeigen
    Das zu Berücksichtigen bedeutet entsprechende Events zu erstellen, welche in die Schrittweitenanpassung eingreifen.
    nein ganz und gar nicht, wenn du den Tab wieder wechselst, wird gerendert, also auch dein callback aufgerufen.
    du siehst also genau das abbild der animation welches du sehen sollst.

    also, wenn du z.B. hier http://forum.jswelt.de/javascript/58...tml#post373003 (JS Neuling mit Performance-Frage zu Animation) während der animation den tab wechselst und nach einer stunde wieder zurück wechselst, siehst du genau das, was du sehen sollst, den endzustand der animation.

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: flüssige Animationen mit dem requestAnimationFrame

    Zitat Zitat von jspit Beitrag anzeigen
    Die Framerate vom requestAnimationFrame kann nicht hängen wie beim setTimeout
    Da wiederspricht dir leider die Praxis - hier: http://forum.jswelt.de/javascript/58...rgrafiken.html (Progressives Ausfüllen von Vektorgrafiken) hab' ich das gemessen und schon verschiedene Werte bekommen...

    Aber über ein Date-Objekt kann man die Animationsgeschwindigkeit recht einfach kontrollieren.

  6. #6
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: flüssige Animationen mit dem requestAnimationFrame

    Zitat Zitat von kkapsner Beitrag anzeigen
    Da wiederspricht dir leider die Praxis - hier: http://forum.jswelt.de/javascript/58...rgrafiken.html (Progressives Ausfüllen von Vektorgrafiken) hab' ich das gemessen und schon verschiedene Werte bekommen
    hat er ja auch nicht behauptet:

    Die Framerate vom requestAnimationFrame kann nicht hängen wie beim setTimeout, kann aber runtergesetzt werden wenn notwendig.
    die framerate bei requestAnimationFrame wird vollkommen vom browser bestimmt und ist dabei an dessen rendering gekoppelt. über das zeitverhalten kann man vorab überhaupt nichts aussagen - nochweniger als bei setTimeout.

  7. #7
    Avatar von jspit
    jspit ist offline Lounge-Member
    registriert
    19-06-2009
    Beiträge
    1.710

    AW: flüssige Animationen mit dem requestAnimationFrame

    Zitat Zitat von hesst Beitrag anzeigen
    die framerate bei requestAnimationFrame wird vollkommen vom browser bestimmt und ist dabei an dessen rendering gekoppelt. über das zeitverhalten kann man vorab überhaupt nichts aussagen - nochweniger als bei setTimeout.
    Hab dazu mal einige eigene Messungen (mit performance.now(); ) gemacht, das Ergebnis war für mich erschreckend.
    Bekam solche Folgen (in ms): 16 16 7 16 16 16 16 7 16 ...
    Und das ohne 'Belastung'. Es st schon wichtig, hier auch eine Zeitmessung mitlaufen zu lassen, wenn eine kontinuierliche Animation angestrebt werden soll.
    Meine Hoffnung aus der Theorie war eine andere Und das Date-Objekt ist dafür sicher ausreichend.

  8. #8
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: flüssige Animationen mit dem requestAnimationFrame

    Zitat Zitat von jspit Beitrag anzeigen
    Hab dazu mal einige eigene Messungen (mit performance.now(); ) gemacht, das Ergebnis war für mich erschreckend.
    Was ist daran erschreckend? die framerate ist doch sehr gut!

    Zitat Zitat von jspit Beitrag anzeigen
    Meine Hoffnung aus der Theorie war eine andere Und das Date-Objekt ist dafür sicher ausreichend.
    dass die framerate dabei nicht fest ist, sondern variabel soll ja gerade der vorteil sein. also das callback wird immer dann gerufen, wenn sowieso gerendert werden muss oder wenn dass lange zeit nicht passieren würde, wird ein aufruf dazwischengeschoben.
    und selbst über Timeout/intervall verlässt man sich nicht auf die vorgegebenen angaben, sondern bestimmt die zeiten im callback, weil diese nicht stimmen müssen.

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: flüssige Animationen mit dem requestAnimationFrame

    Genau das hatte ich mit meiner Aussage gemeint: du kannst dich nicht darauf verlassen, dass die Funktion immer nach einer bestimmten Zeit ausgeführt wird (was für mich ein "hängen" ist) und du mit einem Date-Objekt dir die verstrichene Zeit ausgeben lassen must.

    @jspit: bei mir waren die Unterschiede noch stärker, da mein System unter Last stand.

Ähnliche Themen

  1. Flash Animationen in SWF einbinden
    Von Raptorcss im Forum Flash
    Antworten: 4
    Letzter Beitrag: 07-03-2009, 20:01
  2. Animationen
    Von slosd im Forum Flash
    Antworten: 6
    Letzter Beitrag: 18-05-2006, 14:43
  3. Flash + Animationen
    Von BerndDasBrot im Forum Flash
    Antworten: 1
    Letzter Beitrag: 22-03-2005, 16:19
  4. Flüssige Wandtapete - www.jadecor.de
    Von Heiko Walther im Forum Site-Check
    Antworten: 5
    Letzter Beitrag: 11-04-2001, 19:36
  5. Abspielreihenfolge zweier Animationen
    Von Totinga im Forum Flash
    Antworten: 2
    Letzter Beitrag: 25-10-2000, 12:19

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •