200906Jul

jsAnim: Framework für JavaScript-Animationen

JavaScript-Frameworks gibt es mittlerweile sehr viele und die Spitzenreiter jQuery und MooTools bleiben weiterhin unangefochten — nicht zuletzt wegen ihrer großen Community und ausführlichen Dokumentationen.
Doch mittlerweile gibt es immer mehr Bibliotheken, die lediglich für Animationen konzipiert wurden und daher auch komplexere Bewegungsabläufe bieten. Dazu zählt auch jsAnim von Kevin Dolan: Was das JavaScript-Paket kann, demonstriert schon die Intro-Animation der Website.

jsAnim

Die Bibliothek konzentriert sich auf mathematische Funktionen (z.B. Winkelberechnungen) zur Animation von Elementen und bietet daher keine Selector-Engine. Der Aufbau von jsAnim ist sehr interessant: Das gewünschte DOM-Element wird mit einem Steuerelement (jsAnimManager) verknüpft, das anschließend mit Eigenschaften (Props) versehen wird. Zudem kann eine Bildwiederholrate eingestellt werden, so dass sich festlegen lässt, in welchen Zeitabständen (Millisekunden) ein Bild (Frame) neu berechnet wird.

Das JavaScript-Framework kann unter Anderem Objekte in Kreisbahnen rotieren oder auch Farbflächen in eine andere Farbe übergehen lassen. Hier ein einfaches Code-Beispiel, das ein Objekt an einem Halbkreis entlang bewegt:

  • shroom = document.getElementById("mushroom");
  • manager.registerPosition("mushroom");
  • shroom.setPosition(-250,25);
  • var anim = manager.createAnimObject("mushroom");
  • anim.add({property: Prop.positionSemicircle(false),
  •           to: new Pos(250,25), duration: 2000});

Das Framework hat komprimiert etwa 14 KB und ist bestimmt einen Blick wert.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong