Animationen im Web mit Lottie Files

Animationen auf Webseiten waren zwar bisher möglich, allerdings bietet Lottie als neues Dateiformat eine neuen Ansatz um mit Animationen Webseiten besser und individueller gestalten zu können.

Wie bereits gesagt, ist Lottie ein Dateiformat, dass benutzt wird, um Animationen auf Webseiten anzuzeigen. Das Lottie Format besteht aus SVG Animationen und Grafiken, die im JSON Format gespeichert werden können. Um das Prinzip von Lottie zu verstehen, hier erst einmal SVG und JSON kurz erklärt:

SVG
SVG ist ein Format, das Grafiken die aus Linien, Flächen und Formen bestehen, in Form von Vektoren speichern kann. Vektoren sind keine Pixel, die in einem Raster angeordnet werden wie bei Bildern, sondern mathematische Formeln, die etwa Form, Größe, Position etc. bestimmen.

Der entscheidende Vorteil zu Pixel basierten Videoformaten ist, dass die Animationen keine feste Auflösung haben. Egal wie groß man sie darstellen möchte, sie sind immer gestochen scharf. Das ganze funktioniert, da die mathematischen Formeln sehr schnell umgerechnet werden können, wenn sich die Darstellungsgröße ändert.

JSON
JSON ist ein Dateiformat zur Datenübertragung. Es wird zum Speichern strukturierter Daten auf Webseiten und Mobile Anwendungen genutzt, meist in Verbindung mit Javascript. Bei Lottie wird es eingesetzt, um die SVG Daten in reiner Textform zu speichern, um sie anschließend im Web einbinden zu können.

Wie man bereits ahnen kann, besteht in der Kombination dieser zwei Formate der ganze Zauber.

Anders als Formate wie GIF haben Lottie Files eine genauere, hochauflösendere und generell bessere Darstellung. Aus dem Grund, da bei GIF eine Komprimierung stattfindet, die das Video klein, matschig und pixelig wirken lässt, allerdings wegen der Datenmenge notwendig ist. Das Lottie Format hingegen ist meist bis zu 600 % kleiner als ein GIF, das denselben Inhalt zeigt.

Lottie Files Beispiel

Das JSON Format bietet als Teil von einem Lotti File den Vorteil, dass die Animation wie bei SVG rein in Textform gespeichert und in alle möglichen Webanwendungen eingebunden werden kann.

Mit dem richtigen Wissen könnte man also theoretisch eine Animation mit purem Text in einem beliebigen Editor „schreiben". 

Wie erstellt man Lottie Files?
Animationen können z. B. in After Effects erstellt und anschließend mit dem offiziellen Plug-in von LottieFiles.com in das Lottie oder JSON Format umgewandelt werden. Außerdem bietet die offizielle Website eine große Auswahl an Animationen, die teils kostenlos angeboten werden und auch kommerziell genutzt werden können.

Lottie Files Plugin für After Effects

Zudem kann jede Lottie Animation auf der Website in einem Editor direkt bearbeitet werden. Ebene für Ebene kann jedes Objekt eingefärbt, verschoben oder geändert werden, falls etwas an der Animation nicht zum Anwendungsbereich passt.

Lottie Files Web Editor

Wo kann Lottie benutzt werden?
LottieFiles können überall in Web oder Mobile Anwendungen benutzt werden. Man kann Lottie Animationen mittlerweile bereits auf Websites von bekannten Unternehmen wie Microsoft, oder Disney finden.

Ob in riesig groß, ganz oben auf der Startseite als Willkommensgruß oder auch als kleine klickbare Elemente, die mit der Animation auf sich aufmerksam machen wollen, können sie in vielen Formen und unterschiedlichen Funktionen angewandt werden. Bei der Verwendung von Lottie Files gibt es keine Grenzen.

Für das Lottie Format wird gewöhnlich noch ein Plug-in als Zusatz benötigt, stattdessen kann aber auch eine JSON Datei nativ in den Quellcode auf einer Website eingebunden werden, die das gleiche Endergebnis bietet.

Im Großen und Ganzen werden Lottie Files zur Verschönerung von Webseiten und zum Erzeugen von Interesse beim User benutzt.

By accepting you will be accessing a service provided by a third-party external to https://nrml.de/