21.01.2009 - geschrieben von mrvn in Tutorials

6 $fx() – JavaScript Animation Framework

fx

Neulich bin ich auf die überaus schlanke (3.7kb) Version eines JS Frameworks für Animationen gelangt. Das Ganze nennt sich fx() und ist nicht ganz so einfach zu bedienen wie z.B. jQuery, aber wer lediglich einfache Animationen machen will ohne gleich immer das “tonnenschwere” jQuery einzubinden ist hiermit bestens bedient. Genug Theorie, nun will ich euch das Framework ein wenig genauer vorstelllen. Als Beispiel nehm ich einfach mal eine simple vertikale Hintergrundanimation, also die Veränderung des CSS-Wertes background-position-y.
Als erstes muss man natürlich die FramworkDatei einbinden, welche ihr hier bekommt: fx.inetcat.com

Definieren der Animation

var Down = {type: 'backgroundy', to: -190, step: -1, delay: 10}

Animation auf ein Element übertragen

$fx('#bg').fxAdd(Down).fxRun();

Starten wenn die Seite fertig geladen ist

Damit die Animation automatisch startet, wenn man die Seite aufruft packen wir die letzte Zeile in eine Funktion (ich nenn sie mal LosGehts):

function LosGehts () {
      $fx('#bg').fxAdd(Down).fxRun();
}

und laden diese nun mit der bekannten JS-Anweisung onload in den bodytag hinein:

<body onload="LosGehts();">

Zusammenfassung

Das war es eigentlich schon. Das sieht jetzt alles viel aus, ist es aber gar nicht. Hier nocheinmal den vollständigen JS-Quellcode:

var Down = {type: 'backgroundy', to: -190, step: -1, delay: 10}
function LosGehts () {
      $fx('#bg').fxAdd(Down).fxRun();
}

Fertig

Das haben wir gerade gemacht: $fx() Framework Demo

Wenn man noch ein wenig weiterspielt und die callbacks der fxRun(); nutzt, kann man einfache Kettenanimationen erstellen, denn die Callback Animation wird automatisch gestartet, wenn die Erste durchgelaufen ist. Der callback wird wie folgt aufgrufen:

$fx('#bg').fxAdd(Down).fxRun(function() {    // 1. Animation
     $fx('#bg').fxAdd(Up).fxRun();           // 2. Animation
});

Verzögerung

Um eine Verzögerung in die Animation(en) rein zubringen benutzt man beim Aufrufen einfach noch fxHold(); . In die Klammer kommt die Länge der Verzögerung/Pause in Millisekunden. Zum Beispiel wär 1 Sekunde: fxHold(1000); . Nun wird eine Sekunde gewartet, bevor die Aktion/Animation gestartet wird, in der das Hold drin steht.

Erweitern der Animationen

Nun habe ich das Ganze mit den oben genannten Methoden erweitert, noch andere CSS Attribute benutzt, um so der Animation noch ein wenig mehr Schliff und Tiefe zu geben:

$fx() Framework Demo Erweitert

Hoffe euch hat das Tutorial gefallen. Eure Meinung lese ich gerne in den Kommentaren nach;)

Tags:

6 Kommentare

Trackback - RSS Kommentare zu "$fx() – JavaScript Animation Framework"

Dein Gedanke dazu?...