t3n News Design

JavaScript-Framework für komplexe Animationen: Was das Open-Source-Projekt mo.js kann

JavaScript-Framework für komplexe Animationen: Was das Open-Source-Projekt mo.js kann

und haben die Grundlage für anspruchsvolle Animationen geschaffen. Mit dem mo.js ist mehr möglich als nur einfache Easing-Funktionen. Ihr habt jetzt die Möglichkeit, euch komplette Funktionen selbst zu erstellen.

JavaScript-Framework für komplexe Animationen: Was das Open-Source-Projekt mo.js kann

(Screenshot: mojs.io)

Es ist eine große Hürde für Entwickler, animierte Formen darzustellen, aber genau dieses Problem scheint mo.js jetzt zu lösen. Einfache grafische Formen wie Kreise, Rechtecke und Linien sind kein Problem mehr – und selbst komplexe Animationen will das Framework ermöglichen. Das Beste: Mo.js ist einfach, schnell, und Retina-ready.

mo.js: Der Einstieg ist schnell gemacht

Im Download befindet sich unter anderem ein Demo-HTML-Dokument mit JavaScript-Datei und ausgezeichnetem <div>-Element. Als Alternative zur GitHub-Seite könnt ihr das Framework auch via Bower (bower install mojs) oder NPM (npm install mo-js) installieren. Da mo.js ohne Bibliotheken arbeitet, werden keine weiteren Downloads benötigt.

Leider gibt es bisher keine Dokumentation und auch die Tutorials stehen noch ganz am Anfang. Trotzdem macht das Erstellen eigener Easing-Funktionen das Framework schon jetzt zu einem interessanten Projekt.

Easing durch Pfade: Mo.js macht flexible Animationen möglich

Mit mo.js kannst du individuelle Animationen erstellen. (Screenshot: mojs.io)
Mit mo.js kannst du individuelle Animationen erstellen. (Screenshot: mojs.io)

Zwar wurden mit CSS3 schon Easing-Funktionen eingeführt, doch es stehen insgesamt nur fünf davon zur Verfügung: linear, ease, ease-in, ease-out und ease-in-out. Dazu kommt noch die Möglichkeit, mit cubic-bezier() ein Easing mit einer Bézierkurve zu erstellen.

Mo.js bietet dir da einiges mehr, mit Abbremsungen und Beschleunigungen kannst du deine Animationen komplett individuell entwickeln. Dafür nutzt du ganz einfach Pfade, die mit dem SVG-Element <path> definiert werden, in dem du mit dem Tool deiner Wahl einen Pfad zeichnest und im SVG-Format abspeicherst. Seine Werte nutzt du dann als Grundlage für dein Easing. Neben Bewegungen kannst du mit mo.js beispielsweise auch noch die Form eines Elements verändern.

Mo.js stellen auf ihrer Website einige Beispiele zur Verfügung, das Framework ist kompatibel mit Chrome 4+, Firefox 4+, Opera 11.5+, Safari 4+ und Internet Explorer 9+.

via www.drweb.de

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von Anonymous am 07.01.2016 (17:26 Uhr)

    Wollte das erste Beispiel ausprobieren... also ich seh hier nüscht passieren: http://codepen.io/sol0mka/full/ogOYJj/

    Antworten Teilen
  2. von grep am 09.01.2016 (15:09 Uhr)

    Hallo ...,


    leider ist JavaScript nicht ganz trivial ... und bei Webseitenbesuchern eher tendenziell weniger beliebt, zudem ruiniert es die Performance einer Webseite erheblich.

    Wenn man unbedingt JavaScript benötigt sollte man es einsetzen - ansonsten besser NICHT.

    Selbst CSS-Anweisungen wirken sich im Übermaß negativ auf die Geschwindigkeit einer Webseite aus ... weniger ist manchmal eben (doch) mehr.

    K(eep) I(t) S(tupid) S(imple) - dass sog. KISS-Prinzip sollte daher das Credo lauten.


    Ciao, Sascha.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
Virtual Reality im Browser: Mozilla stellt Open-Source-Framework für VR-Websites vor
Virtual Reality im Browser: Mozilla stellt Open-Source-Framework für VR-Websites vor

Mozillas A-Frame soll es deutlich einfacher machen, Virtual-Reality-Websites für den Desktop, Smartphones und VR-Brillen zu entwickeln. Wir werfen einen ersten Blick auf das Open-Source-Framework. » weiterlesen

Facebook: 360-Grad-Kamera ist jetzt Open Source
Facebook: 360-Grad-Kamera ist jetzt Open Source

Bei der F8-Konferenz stellte Facebook seine 360-Grad-Kamera vor. Jetzt sind die Hardware-Pläne und der Software-Quellcode der 3D-Videokamera Surround 360 Open Source. » weiterlesen

Darum ist eine staatliche Open-Source-Pflicht sinnvoll [Kommentar]
Darum ist eine staatliche Open-Source-Pflicht sinnvoll [Kommentar]

Open Source per Gesetz: Wer im Auftrag der bulgarischen Regierung Software schreibt, muss diese in Zukunft unter einer Open-Source-Lizenz veröffentlichen. Aus guten Gründen. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?