Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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

(Screenshot: mojs.io)

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

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, Open Source 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

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

4 Reaktionen
Anonymous
Anonymous
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

anordonarywizard
anordonarywizard
08.01.2016, 08:17 Uhr

Auf welchem Browser bist du denn? Hier in Chrome funktioniert alles so wie es sein sollte.

Antworten

Florian Blaschke
08.01.2016, 10:26 Uhr

Sieht hier alles gut aus. Könnte also wirklich am Browser liegen. Oder hast du JavaScript deaktiviert? ^^

grep
grep
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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen