201213Mär

JSTween: Eigenständige Bibliothek für Animationen

Inzwischen gibt es für reine JavaScript-Animationen gesonderte Lösungen in Form von Frameworks, die etwas mehr Komfort als komplette Bibliotheken (wie jQuery) bei der Erstellung von animierten Szenen bieten. Zuletzt wurden das $fx-Framework und jsMorph veröffentlicht, die viele Möglichkeiten für die Animation von DOM-Elementen bieten.
Ein weiterer Vertreter dieser Art wäre die Bibliothek JSTween, die zwar auch eine eigenständige Lösung darstellt, aber zusammen mit jQuery eingesetzt werden kann.

JSTween - JavaScript Animation Library

JSTween bietet neben den üblichen CSS-Attributen auch CSS3-Tweens an, zu denen beispielsweise "rotate", "transform", "backgroundSize" oder "borderRadius" gehören. Ein Vorteil ist, dass die Animationen bei JSTween erst durch den Aufruf der "play"-Methode gestartet werden. Callbacks werden ebenfalls unterstützt und zudem kann die Einheit (Px, Em, %) der Animation angegeben werden. Ein Beispiel:

  • $(".target").tween({
  • left:{
  • start: 0,
  • stop: 100,
  • time: 0,
  • duration: 1,
  • units: "px"
  • }
  • }).play();

JSTween wurde unter der "Creative Commons Attribution-ShareAlike 3.0 Unported"-Lizenz veröffentlicht und auf der Website der Bibliothek finden sich etliche Beispiele sowie die Dokumentation.