JavaScript/Window/requestAnimationFrame

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Methode Window.requestAnimationFrame ermöglicht es Funktionen, ähnlich wie mit setTimeout, zeitlich verzögert auszuführen, bietet aber einige Vorteile.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Syntax

var requestID = window.requestAnimationFrame(callback);

  • callback: ein Funktionsobjekt, das vor dem nächsten Rendern ausgeführt wird
    (callback muss ein Funktionsobjekt sein, also ohne Anführungszeichen und Klammern. Es können keine Parameter an die Funktion übergeben werden. )
  • requestID: Rückgabewert, der z.B. bei cancelAnimationframe(requestID) benötigt wird

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiel

Beispiel ansehen …
  var startBtn  = document.getElementById('startBtn'),
       stopBtn  = document.getElementById('stopBtn'),
       resetBtn = document.getElementById('resetBtn'),
       elem     = document.getElementById("anim");
 
  var requestID = undefined;
  var startTime = undefined;
 
	function render(time) {
		if (time === undefined) {
			time = Date.now();
		}
		if (startTime === undefined) {
			startTime = time;
		}
		elem.style.left = ((time - startTime)/10 % 800) + "px";
	}
 
	function animate () {
		render(); 
		requestID = requestAnimationFrame(animate,elem);
	}
 
	function stopAnimation () {
		if (requestID) {
			cancelAnimationFrame(requestID);
			requestID = undefined;
		} 
	}
 
	startBtn.addEventListener('click',function () { animate(); });
	stopBtn.addEventListener('click',stopAnimation);
	resetBtn.addEventListener('click',function () {
		stopAnimation();
		elem.style.left = "0px";
		startTime = undefined;
	});

Durch einen Klick auf den Start-Button wird die Funktion animate() aufgerufen. Sie speichert eine RequestID und ruft die Funktion render() auf. Mit requestAnimationFrame wird render() erneut aufgerufen.

In der Funktion render() wird die Startzeit von der aktuellen Zeit abgezogen und als Wert für element.style.left verwendet. Bei einem Wert von über 800 (der Breite des Elternelements) endet die Funktion und wird über animate() erneut aufgerufen.

[Bearbeiten] cancelAnimationFrame

Bei einem Klick auf den Stop-Button wird die Funktion stopAnimation() aufgerufen. Sie beendet die Animation mit Window.cancelAnimationFrame, wobei die RequestID als Parameter benötigt wird.

Syntax

window.cancelAnimationFrame(requestID);

[Bearbeiten] Fallback für ältere Browser

Beispiel
(function() {
    var lastTime = 0;
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

In dieser anonymen Funktion wird überprüft, ob requestAnimationFrame bekannt ist. Falls nicht, wird setTimeout aufgerufen, was zwar einige Nachteile hat, aber in älteren Browsern funktioniert.

[Bearbeiten] Vorteile gegenüber setTimeout

requestAnimationFrame ist besonders für Animationen geeignet, da es dafür ausgelegt ist, so schnell wie möglich, aber nicht schneller als nötig ausgeführt zu werden. Das heißt, es muss keine Verzögerungen angegeben werden, wann die Funktion ausgeführt werden soll. Der Browser führt sie aus, sobald das Bild auf dem Monitor aktualisiert werden soll. Innerhalb der Funktion muss requestAnimationFrame erneut aufgerufen werden, um die Animation fortzusetzen.

Der Browser sorgt dafür, dass die Funktion nicht öfter aufgerufen wird, als der Bildschirm das Bild neu zeichnen kann (üblicherweise 60 bis 75 Bilder pro Sekunde). Auch auf inaktiven (und daher nicht sichtbaren) Tabs wird maximal ein AnimationFrame pro Sekunde ausgelöst, um nicht unnötig Rechenkraft zu verschwenden. Sollte das angegebene Element nicht sichtbar sein (weil z.B. aus dem sichtbaren Bereich gescrollt) wird die Aktualisierungsrate ebenfalls heruntergesetzt.

Empfehlung: Für die Animation von CSS-Eigenschaften können Sie die Web Animations API verwenden, die diese Animationen schnell und einfach nativ im Browser durchführt.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML