Vorheriger Artikel Nächster Artikel

Greensock Animation Platform: Flüssige Animationen mit JavaScript

Mit Version 12 der Greensock Animation Platform (GSAP) steht das aus der Flash-Welt bekannte jetzt auch für performante Animationen mit und zur Verfügung. Wir stellen euch kurz vor, was mit GSAP möglich ist.

Greensock Animation Platform: Flüssige Animationen mit JavaScript
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 . 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:

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

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von Marcus Graf am 18.06.2012 (17:33 Uhr)

    Werde ich mir mal anschauen, habe schon viel mit GreenSock und Flash gearbeitet und die Benchmarks sehen gut aus.

    Antworten Teilen
  2. von Mark am 20.06.2012 (07:32 Uhr)

    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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
Tolle JavaScript-Datenbank: Die besten Libraries, Frameworks und Plugins im Überblick
Tolle JavaScript-Datenbank: Die besten Libraries, Frameworks und Plugins im Überblick

JSDB.io fungiert als Datenbank der besten JavaScript-Libraries im Netz. Dank sinnvoller Unterkategorien findet ihr hier schnell, wonach ihr sucht. » weiterlesen

Freies JavaScript-Framework am Ende: Yahoo stellt Arbeit an YUI ein
Freies JavaScript-Framework am Ende: Yahoo stellt Arbeit an YUI ein

Yahoo wird mit sofortiger Wirkung die Arbeit am quelloffenen YUI-Framework einstellen. Als Gründe nannte der Konzern ein gesunkenes Interesse von Seiten der Community und die stark veränderte … » weiterlesen

Ihr habt gewählt: Die beliebtesten Tools und Frameworks für Webentwickler [t3n-Umfrage]
Ihr habt gewählt: Die beliebtesten Tools und Frameworks für Webentwickler [t3n-Umfrage]

Wir haben euch in unserem Developer-Poll gefragt welche Frameworks, Sprachen und Editoren beziehungsweise IDEs ihr verwendet. Hier findet ihr nun die Auswertung. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen