Greensock Animation Platform: Flüssige Animationen mit JavaScript
• Lesezeit: 2 Min. Gerade keine Zeit? Jetzt speichern und später lesen
Greensock Animation Platform Projektseite
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.
Greensock Animation Platform Showcase-Beispiel mit AS3
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.
Einbinden der Greensock Animation JavaScript-Bibliothek in HTML
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.
JavaScript Bibliotheken der Greensock Animation Platform v12 im Performance-Check
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
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
Werde ich mir mal anschauen, habe schon viel mit GreenSock und Flash gearbeitet und die Benchmarks sehen gut aus.
Wir setzen die Frameworks von Jack Doyle bereits seit Jahren in Flashprojekten ein. Auch die neue JS Varianten sind Ihr Geld wert, sparen viel Zeit und eröffnen eine große Menge an Möglichkeiten.
Greez
Mark