201109Sep

$fx: Kompaktes JS-Framework für Animationen

Während "größere" JavaScript-Frameworks wie jQuery, Prototype oder Dojo Komplettpakete darstellen, die mit DOM-Manipulationen, Effekten, Plugin-Fähigkeiten und Ajax-Funktionen ein breites Gebiet abstecken, tauchen immer häufiger kleinere Frameworks auf, die auf einen speziellen Bereich ausgelegt sind. Solche Micro-Frameworks existieren mittlerweile auch in einer großen Anzahl. Für Timeline-Animationen eignen sich Bibliotheken wie Mashi oder jsAnim.
Ein jüngeres Projekt dieser Art nennt sich $fx und bietet bei einer Größe von 3,7 KB nützliche Funktionen, um DOM-Elemente zu animieren.

fx - JavaScript animation library

Das kleine Framework besteht derzeit aus rund 270 Zeilen und bietet lediglich Methoden für Effekte und Abfolgen von Animationen. So können DOM-Objekte mit mehreren Effekten (Chaining) versehen und gezielt gesteuert werden. Ein Auszug aus den Beispielen, die sich in der Dokumentation finden:

  • var ufoRotate = {type: "backgroundx", to: 340, step: 85}
  •  
  • var onloop = function(loopsDone) {
  • info.innerHTML = "Loop #" + loopsDone;
  • }
  •  
  • $fx("#ufo3").fxAdd(ufoRotate).fxRun(null, -1, onloop);

Das Skript eignet sich also sehr gut für Sprite-Animationen, die mit "background-position" animiert werden müssen. Über den Parameter "step" kann beispielsweise angegeben werden, um wie viele Pixel die Position der Hintergrundgrafik bei jedem Schritt verschoben werden soll.
Das $fx-Framework befindet sich momentan noch in einer frühen Phase (Version 0.1), sieht aber jetzt schon vielversprechend aus.