Welche DOM-Animationstechnik solltest du verwenden?

Du hast nun drei Methoden gesehen, mit denen du Teile deiner Webseite animieren kannst: window.setInterval/setTimeout, window.requestAnimationFrame und CSS-Animation/Übergänge.

Wenn du dich Fragst, welche Methode du verwenden sollst, stelle dir folgende Fragen:

Wenn wir Webseiten entwickeln, ist uns die Performanz sehr wichtig. Daher wird dies für uns wohl das wichtigste Kriterium sein. Aber die Performanz der Webbrowser verändert sich laufend und Browser auf Mobil-Platttformen können sich ganz anders verhalten als auf dem Desktop. Daher kann die Methode welche heute die schnellste ist, schon morgen die langsamste sein. Aktulle sind CSS Animationen/Transitionen die schnellste, dann requestAnimationFrame und schlussendlich setInterval.

Mit CSS kann man jedoch nicht alles machen. Um zum Beispiel Pixel und Formen auf einem <canvas> zu zeichnen, musst du Funktionen wie fillRect() aufrufen und kannst CSS nicht verwenden. Indiesem Fall musst du requestAnimationFrame verwenden oder periodisch setInterval aufrufen. Dies machen wir hier auf Khan Academy in der ProcessingJS-Umgebung. ProcessingJS ist eine JS-Bibliothek, die auf einem <canvas> zeichnet, und wenn du eine draw() Funktion im Code definierst, dann verwendet ProcessingJS setInterval um diese Funktion draw() basierend auf der frameRate regelmässig aufzurufen.

Manchmal möchtest du auch JavaScript Funktionen regelmäßig aufrufen, obwohl du gar nichts animieren willst. So kannst du einen Server regelmäßig nach Updates abfragen, wie Twitter dies macht, wenn es seine Echtzeit-Feeds aktualisiert. In diesem Fall kannst du einfach setInterval verwenden und es ist egal, dass das Timing nicht ganz genau ist, denn du rufst es ja nur ungefähr jede Minute auf. Dies machen wir z.b. auf Khan Academy auf der Hilfe-Seite um alle 2 Minuten zu prüfen ob neue HIlfanfragen eingetroffen sind.

Natürlich solltest du immer die Browser-Kompatibilität im Hinterkopf behalten. Wenn du Code schreibst, welcher auch in IE9 funktionieren sollte, dann kannst du weder requestAnimationFrame noch CSS-Animationen verwenden. Dann musst du eine Kombination von Methoden welche in allen Browsern funktionieren verwenden, oder eine Bibliothek, welche dies für dich tut, wie Velocity.js verwenden.

Es gibt noch viel mehr über alle diese Methoden zu lernen. Folgen diesen Links um mehr zu erfahren:

Bonus für Dr. Who Fans: eines meiner Lieblingsbeispiele für die Mächtigkeit von CSS3 Animationen ist dieses animierte TARDIS.