JavaScript

JavaScript-Library mo.js hilft beim effektvollen Erstellen von Animationen im Web

mo.js – So kommt Bewegung ins Web
Keine Kommentare

Um Animationen im Web zu erstellen, nutzen die meisten Libraries auf dem Markt die Möglichkeit, Elemente im DOM oder SVG DOM zu animieren. Dass es auch anders geht, beweist die noch relativ neue JavaScript-Library mo.js, die beim Erstellen von effektvollen Animationen im Web hilft.

„Motion for the Web“ – das steht im Fokus der Entwickler hinter der JavaScript-Library mo.js. Nun sind Animationen ja heutzutage ein gängiges Effektmittel auf fast allen Websites und lassen sich zum Beispiel mit CSS oder JavaScript umsetzen. Was mo.js von anderen Libraries unterscheidet, ist dass Animationen nicht nur über die Manipulation des DOM oder SVG DOM umgesetzt werden können, sondern alternativ besondere mo.js-Objekte erstellt werden. Gleichzeitig bietet die JavaScript-Library einige nützliche Features und Tools, um effektvolle Animationen für das Web zu erstellen.

mo.js – die Basics

Shapes in mo.js

Shapes in mo.js, Quelle: CodePen

mo.js bietet eine Reihe von Formen und Objekten, die sich mit Animationen versehen lassen. Zur Verfügung stehen zum Beispiel circle, rect, cross, equal, zigzag und polygon, wobei circle der Default ist. User können zudem die Füllung, Strichrichtung und Strichbreite definieren und einen Radius für die Form angeben und ihn entsprechend anpassen. Die Form wird mithilfe von einer absoluten Positionierung in der Mitte des Screens platziert, sofern der User keine anderen Angaben vornimmt.

Schaut man sich die zur Verfügung stehenden Formen im DOM an, fällt auf, dass es sich dabei jeweils um SVG-Shapes handelt, die in einem div platziert werden. Ebenso können auch parent-Elemente weitergegeben werden, wenn die Form irgendwo im DOM platziert werden soll. Und wem das nicht reicht, kann zusätzlich eigene Custom-Shapes erstellen und diese animieren.

ML Conference 2019

Workshop: Machine Learning 101++ using Python

mit Dr. Pieter Buteneers (Chatlayer.ai)

Honey Bee Conservation using Deep Learning

mit Thiago da Silva Alves, Jean Metz (JArchitects)

Python Summit 2019

Daten analysieren und transformieren mit Python

mit Doniyor Jurabayev (Freelancer)

Advanced Flow Control

mit Oz Tiram (noris network AG)

Animationen erstellen mit mo.js

Um eine Form mit mo.js zu animieren, wird ein Objekt mit den Werten weitergegeben, die anzeigen, wie die Animation aussehen soll. Dafür stehen eine Reihe weiterer Parameter zur Verfügung, etwa:

  • Dauer
  • Verzögerung
  • Wiederholung
  • Geschwindigkeit
  • isYoyo
  • easing
  • backwardEasing
  • isSoftHide

Außerdem lassen sich auch problemlos zwei Animationen hintereinander auf die gleiche Form anwenden. Darüber hinaus stehen zahlreiche weitere Features zur Verfügung, mit der User für effektvollere Animationen sorgen können.

Ebenso bringt die JavaScript-Library nicht nur verschiedene built-in easing-Values mit, sondern ermöglicht auch die Übergabe eines SVG-Pfads als easing-Wert. Genauso stehen dem User umfangreiche Tooling-Möglichkeiten zur Verfügung. Das folgende Video bietet einen Eindruck davon:

mojs workflow from Oleg Solomka on Vimeo

Installation und Verfügbarkeit

Die Installation der JavaScript-Library ist simpel: sie kann über npm, Bower oder cdn installiert werden. Unterstützt wird sie in allen modernen Browsern sowie im Internet Exlorer ab Version 9. Auf der Projektwebsite finden sich eine ganze Reihe von Demos sowie eine umfangreiche Dokumentation. Alle weiteren Informationen rund um mo.js sind auf GitHub zusammengefasst, und auch der Artikel von Sarah Drassner bietet einen guten Überblick über die JavaScript-Library.

Name mo.js
Hersteller Oleg Solomka
Projektwebsite http://mojs.io/
GitHub https://github.com/legomushroom/mojs
Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -