Peformante Tweenings mit JavaScript

Die Greensock Animation Platform (GSAP) ist alten Flash-Hasen besser geläufig als TweenLite oder TweenMax. Mit denen konnte man auch in den Vorgängerversionen schon komplexe, flüssig ablaufende Animationen mittels ActionScript 3 und 2 erstellen.

Die Greensock Animation Platform v12, die derzeit als Betaversion verfügbar ist, unterstützt auch JavaScript und erleichtert so das Erstellen von tweenbasierten Animationen mit HTML5 ohne Adobe Flash. In der JavaScript-Version der GSAP wird die gleiche API-Syntax verwendet, die schon für die Flash-Variante eingesetzt wurde. Der Fokus von GASAP liegt auch bei JavaScript-Tweenings auf der Vereinfachung von Animationsaufgaben und guter Performance für flüssige Tweenings. Die bekannteste Anfänger-Beispielanimation für Tweenings ist ein roter Ball, der mittels Eigenschaftenveränderungen zum Springen animiert wird.

Für freie Projekt können die JavaScripts TweenMax.js, TweenLite.js, TimelineMax.js und TimelineMin.js der Greensock Animation Platform kostenfrei verwendet werden. Wenn man mit GSAP nicht frei zugängliche, kommerzielle Websites, Spiele oder sonstige geldbringende Anwendungen erstellen möchte, muss man eine GSAP-Lizenz erwerben.

Das Lite-Tweening Framework bietet Grundfunktionalitäten für einfache Tweenings mit JavaScript. TweenMax enthält zusätzliche Plugins und Extrafunktionen. Für die Kombination und Sequenzierung von mehreren Tweenings stellt GSAP TimelineLite und TimelineMax zur Verfügung. Mit den GASAP Tweening JavaScript Bibliotheken lässt sich jeder numerische Wert über einfache Syntax tweenen. Für Feintuning der Animation steht eine Easing-Funktion bereit, die Beschleunigen, Abbremsen oder Slowmotion von Tweening-Objekten erlaubt. Mit den GASAP-JavaScript-Bibliotheken kann man nicht nur JavaScript-Objekte animieren, sondern auch DOM-Elemente und CSS-Werte z.B. auf dem HTML5 Canvas-Element. In Hinsicht auf Browserkompatibilität funktioniert GASAP nach eigenen Angaben fast vollständig in allen gängigen Browsern - zumindest mit Fallback-Lösung bis hin zu Internet Explorer 6.

Die Einbindung von TweenLite und Co. geschieht wie üblich bei JavaScript-Bibliotheken und ist mit gängigen Bibliotheken wie jQuery kompatibel. In der JavaScript API-Dokumentation findet man alle verfügbaren Klassen, Eigenschaften und Funktionen.

Ein Videotutorial bei Greensock erklärt ausführlich, wie man JavaScript Tweenings in HTML5 einbindet. In einem Speed-Test von Greensock ist am Beispiel einer klassischen Fliegende-Punkte-Animation zu erkennen, dass die GASAP-JavaScripte im Vergleich zu z.B. jQuery tatsächlich performanter und flüssiger ablaufen.

Die JavaScript Version der Greensock Animation v12 ist ein gelungenes Beispiel dafür, dass bewährte Dinge aus der Flash-Welt wie z.B. das Tweening-Konzept, manchmal auch in HTML5 Animationen hifreich sein können.

Was haltet ihr von den JavaScript-Tweening-Helfern?

Weiterführende Links:

• Greensock Animation Platform v12
• Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP)

Bildnachweis für die Newsübersicht: aka proligde / flickr.com, Lizenz: CC-BY