mo.js: JavaScript-Framework für komplexe Animationen

Dank CSS3 und JavaScript sind die Grundlagen für native und anspruchsvolle Animationen im Browser gesetzt. Doch die CSS-Eigenschaften und JavaScript-Methoden erlauben nur grundsätzliche Bewegungen. Das Framework mo.js hingegen ermöglicht wesentlich komplexere Animationen – vor allem mit Hilfe sehr individueller und einfach zu erstellender Easing-Funktionen.

Schneller Einstieg, aber noch keine Dokumentation

Da mo.js ohne jQuery oder andere Bibliotheken auskommt, muss lediglich die JavaScript-Datei des Frameworks eingebunden werden. Im Download-Paket ist ein Demo-HTML-Dokument vorhanden, indem die JavaScript-Datei sowie ein „<div>“-Element bereits ausgezeichnet sind. Du kannst damit also direkt starten und dich mit den Möglichkeiten von mo.js auseinandersetzen.

Auf der Website gibt es einige Tutorials, die anhand von Code-Beispielen samt Demo erläutern, was mo.js kann und wie man es anwendet. Leider gibt es derzeit nur Tutorials zu den Easing-Möglichkeiten. Von den verschiedenen Modulen und den Tweening-Funktionen sind derzeit noch keine Tutorials vorrätig. Außerdem fehlt noch eine Dokumentation. Doch alleine das individuelle Erstellen komplexer Easing-Funktionen macht mo.js bereits zu einem äußerst interessanten Animationswerkzeug.

Tutorial-Seite

Einfache Syntax für einfache Animationen

Die Verwendung von mo.js ist sehr einfach. Mit „mojs.Tween()“ kannst du eine neue Animation erstellen und einem beliebigen Element zuweisen. Die Anzahl der Wiederholungen und Dauer der Animation werden über Parameter übergeben. Per Event-Handler steuerst du du eigentliche Animation.

new mojs.Tween({
  repeat: 2,
  duration: 3000,
  delay: 1000,
  onUpdate: function (progress) {
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * progress + "px)";
 }
}).run();

Im Beispiel wird eine Animation mit drei Sekunden Dauer erstellt, die nach einer Sekunde startet und sich zweimal wiederholt. Über „onUpdate()“ rufen wir eine Funktion auf, welche für die eigentliche Animation zuständig ist. Per „progress“ wird der Fortschritt der Animation übergeben. Hierbei handelt es sich um einen Wert, der im Laufe der Animation von 0 zu 1 hochzählt.

Dieser Wert dient im Beispiel dazu, die Animation zu berechnen. Dazu wird „progress“ mit dem Zielwert der Animation – im Beispiel 200 – multipliziert. Das „<div>“-Element bewegt sich also per „translateY()“ auf der Y-Achse um 200 Pixel.

Easing mit Pfaden erstellen

Mit CSS3 sind eine Reihe von Easing-Funktionen für Animationen eingeführt worden. Insgesamt stehen einem nur fünf verschiedene, einfach gehaltene Möglichkeiten zur Verfügung: „linear“, „ease“, „ease-in“, „ease-out“ und „ease-in-out“. Mit „cubic-bezier()“ hast zu zudem noch die Möglichkeit, ein individuelles Easing anhand einer Bézierkurve zu erstellen.

Pfad als Grundlage fürs Easing

Mit mo.js kannst du jedoch ein komplett individuelles Easing mit beliebig vielen Beschleunigungen und Abbremsungen entwickeln. Diese werden anhand eines Pfades auf der Basis des SVG-Elementes „<path>“ definiert. Du zeicnest also beispielsweise in Illustrator einen Pfad und speicherst ihn im SVG-Format. Die Werte des Pfades, die in der „d“-Eigenschaft ausgezeichnet sind, nutzt du anschließend, um die als Grundlage für dein Easing zu verwenden.

var bouncyEasing = mojs.easing.path("M0,100 C6.50461245,96.8525391 …");

Im Beispiel wird per „mojs.easing.path()“ ein SVG-Pfad als Easing-Pfad übergeben. Diesen übergeben wir dann einer Funktion, die das Easing eines Elementes per CSS-Eigenschaft „transform“ umsetzt.

new mojs.Tween({
  onUpdate: function (progress) {
    var bounceProgress = bouncyEasing(progress);
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * bounceProgress + "px)";
  }
}).run();

Im Beispiel wird ein „<div>“-Element mit dem individuellen Easing auf der Y-Achse dank „translateY()“ animiert. Statt einer linearen Animation wie im ersten Beispiel kannst du beliebig viele Abbremsungen und Beschleunigungen sowie Federungen einbauen. So lässt sich mit einem entsprechend gezeichneten Pfad also auch die Richtung der Bewegung umkehren. Bei den klassischen CSS3-Easing-Funktionen klappt eine Animation immer nur in eine Richtung.

Im Übrigen kannst du mit mo.js ein Element nicht nur bewegen, sondern auch die Form verändern. Per „scaleX()“ oder „scaleY()“ erreichst du zum Beispiel, dass ein Element seine Größe ändert, während es animiert wird.

Umfangreiche Animationsmöglichkeiten

Einige Beispiele auf der Website von mo.js zeigen, welche umfangreichen Animationsmöglichkeiten mo.js besitzt. Es bleibt zu hoffen, dass die Dokumentation zügig erscheint und weitere Tutorials veröffentlicht werden. Derzeit ist mo.js nur eingeschränkt nutzbar. Wer möchte, kann sich anhand der Beispiele natürlich selbst in das Framework einarbeiten.

Komplexe Animation mit mo.js

Auch wenn derzeit noch nicht alle Funktionen dokumentiert sind, lohnt es sich, mo.js im Auge zu behalten. Das Framework steht unter der liberalen MIT-Lizenz für private und kommerzielle Zwecke zur freien Nutzung bereit.

(dpe)