Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » JavaScript & jQuery » Performantere JavaScript-Animationen mit requestAnimationFrame

Performantere JavaScript-Animationen mit requestAnimationFrame

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 7. Dezember 2012

Inhaltsverzeichnis

Dank CSS3 sind Animationen ohne Flash und JavaScript kein Problem mehr. Aber nicht immer kommt man mit den Möglichkeiten von CSS3 aus. Vor allem, wenn Animationen berechnet werden müssen, ist der Einsatz von JavaScript unumgänglich. Es gibt jedoch eine wesentlich performantere Möglichkeit als den Einsatz von setTimeout und setInterval. Denn setTimeout und setInterval haben den Nachteil, dass sie eine Funktion immer nach einer fest definierten Zeitspanne wiederholen. Gerade für Animationen ist ein solch fester Wert ungeeignet. Jeder, der schon einmal eine Animationen mit den beiden Funktionen programmiert hat, kennt wahrscheinlich die Schwierigkeit, den idealen Wert für die Zeitspanne in Kombination mit den jeweiligen Animationsschritten zu finden. Außerdem sind die Funktionsaufrufe per setTimeout und setInterval selten im Einklang mit der Bildfrequenz des Monitors, sodass nicht bei jedem Aufruf tatsächlich eine Aktualisierung der Animation dargestellt werden kann.

requestanimationframe Performantere JavaScript-Animationen mit requestAnimationFrame

requestAnimationFrame für ausgeglichene Animationen

Die Alternative, die im Rahmen von HTML5 eingeführt wurde,  heißt requestAnimationFrame. Vom Grundsatz her funktioniert sie ähnlich wie die klassische Methode – allerdings ohne Angabe einer Zeitspanne, welche die Wiederholungsrate angibt. Denn die wird vom Browser selbst festgelegt. Gerade, wenn mehrere Animationen parallel im Browser ausgeführt werden, kommt man mit setTimeout und setInterval schnell an die Grenzen einer flüssigen Animation. Mit requestAnimationFrame wird die Frame-Rate – wenn nötig – automatisch heruntergesetzt, um eine flüssige Bewegung zu erhalten:

var schritt = 0;
function animation() {
 schritt += 10;
 document.getElementById("element").style.left = schritt + "px";
 window.requestAnimationFrame(animation);
}
window.requestAnimationFrame(animation);

Im Beispiel wird ein HTML-Element in 10-Pixel-Schritten von links nach rechts animiert. Die Standard-Wiederholungsrate liegt in der Regel bei 60 Frames pro Sekunde, kann aber je nach CPU-Auslastung variieren. Der Browser versucht also nicht, an einer fixen Frame-Rate festzuhalten. Ein weiterer Vorteil von requestAnimationFrame ist, dass Animationen nur in sichtbaren Fenstern, beziehungsweise Tabs ausgeführt werden. Sobald sich die Animation in einem nicht sichtbaren Fenster oder Tab befindet, wird sie angehalten und automatisch fortgesetzt, sobald sie wieder sichtbar ist. Um Animationen manuell anzuhalten, gibt es als Gegenstück die Funktion cancelAnimationFrame.

Browser-Support mit Vendor-Prefix

Bislang unterstützen Webkit- und Mozilla-Browser sowie der aktuelle Internet Explorer die Funktion requestAnimationFrame. Die Cancel-Funktion cancelAnimationFrame wird derzeit nur von Mozilla unterstützt. Da die Funktionen noch relativ neu sind, bedarf es unterschiedlicher Schreibweisen, um alle Browser, die die Funktionen unterstützen, zu berücksichtigen. Über eine Variable  kann man die richtige Schreibweise automatisch auswählen lassen:

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

Fazit: Die Performance von Animationen, die mit requestAnimationFrame programmiert werden, spricht für sich, weshalb sie (gegebenenfalls mit einem Fallback für ältere Browser) immer den altbekannten Möglichkeiten vorgezogen werden sollte. Vor allem bei mobilen Geräten, die eine geringere Leistung haben, macht sich das bemerkbar. Einen schönen Vergleich zwischen beiden Möglichkeiten gibt es übrigens beim Test Drive des Internet Explorers! Ausgerechnet…

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Trendmarke Logo.

Trendmarke GmbH

Stuttgart

WP Agentur

wp-agentur.de | WordPress-Agentur

Köln

WordPress Agentur Kreativdenker

Speyer

Evergreen Media Innsbruck Logo.

Evergreen Media®

Innsbruck

VABELHAVT

Innsbruck

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten zu „Performantere JavaScript-Animationen mit requestAnimationFrame“
— was ist Deine Meinung?

  1. Felix sagt:
    25. Juli 2014 um 14:55 Uhr

    Wenn ich das Script ansehe „schritt += 10;“

    und den Satz darunter lese:
    „Der Browser versucht also nicht, an einer fixen Frame-Rate festzuhalten.“

    bedeutet es also, wenn der Browser das nicht schafft wird die Animation langsamer abgespielt? – also völlig ungeeignet um Animationen Zeitgebunden zu animieren – es sei man checkt immer wie viel Zeit vergangen ist und setzt die Position in Abhang der vergangenen Zeit?

    Antworten
  2. Arcade sagt:
    6. Februar 2013 um 21:00 Uhr

    Ich hab hier ein Webkit Browser Safari auf dem iPad.
    Der Test Drive des Internetexplorers läuft da mit set Timeout viel flüssiger als mit requestAnimationFrame. Da erkennt man nämlich richtig das der Zeiger ruckelt. Der andere läuft schön flüssig.

    Warum?

    Antworten
  3. Martin Wohlert sagt:
    7. Dezember 2012 um 18:55 Uhr

    Interessante Sache. Unterstützt der IE 9 das auch? Bin mir nicht sicher, ob ihr mit „dem aktuellen Internet Explorer“ Version 9 oder 10 meint. Und Opera hat da noch nix? Dauert aber sicher auch nicht lang.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑