Was ist Lottie-Animation? Alles, was Sie über Lotti wissen müssen

Das Erstellen komplexer Animationen für Android, iOS usw. ist natürlich ein langwieriger Prozess. Es ist selbst als Designer oder Animator manchmal ein Denkprozess.

Sie müssen entweder große Bilddateien für jede Bildschirmgröße hochladen oder tausend Zeilen spröden, schwer zu wartenden Code schreiben. Daher verwenden die meisten Apps keine Videoanimation, obwohl sie ein leistungsstarkes Tool für die Kommunikation von Ideen und die Erzeugung überzeugender Benutzererfahrungen sind.

Das muss nicht sein! Diese Probleme sind schon lange vorbei und es gibt viele praktische Dateiformate, Plattformen usw., die Sie nutzen können, um Ihren Arbeitsablauf zu vereinfachen. Ein solches Format ist Lottie.

In diesem Blog erzähle ich Ihnen von diesem interessanten und praktischen Format.

Was ist Lotti?

In den Jahren vor Lottie erstellten Motion Designer ihre Animationen und schickten sie dann zur Umsetzung an Softwareentwickler. Die Umsetzungsmöglichkeiten waren unzureichend und im Umfang begrenzt.

Es war gängige Praxis für Entwickler, Animationen in Formaten mit geringer Qualität zu exportieren oder zu versuchen, das Animationsdesign im Code von Grund auf neu zu erstellen, so gut sie es konnten. Es überrascht nicht, dass dies nicht die effizienteste Technik war und häufig zu ineffizienten Animationen führte, die völlig anders aussahen als die beabsichtigte Ausgabe des Bewegungsdesigners.

Hernan Torrisi hatte 2015 die Idee, die Darstellung einer in Adobe After Effects erstellten Animation zu exportieren und die Animation zur Laufzeit zu generieren. Die Skriptfunktionen von After Effects wurden verwendet, um ein Animationsprojekt und ein Plugin für Adobe After Effects namens Bodymovin zu iterieren entwickelt, das eine Beschreibung der Animation im JSON-Format erzeugt.

Zusammen mit dem Player für den Browser lieferte er den allerersten Renderer für das Format, der mit Javascript erstellt wurde.

Seit seiner Einführung im Jahr 2017 bietet LottieFiles Animatoren und Entwicklern eine Plattform, um ihre Animationen schnell zu testen, zu teilen und im Internet auszustellen. Das Lottie Animation-based File Format (JSON) ermöglicht es Designern, Animationen mühelos zwischen Plattformen zu übertragen.

Lottie wurde nach Charlotte „Lotte“ Reiniger benannt, einer deutschen Filmregisseurin, die weithin als weltweit führende Pionierin der Silhouetten-Animation gilt. Es gibt keine Einschränkungen für die unterstützten Plattformen. Es kann über iOS, Android und das Internet darauf zugegriffen werden.

Eine Kombination aus Vektor- und Rasterkomponenten wird in Lottie verwendet, um qualitativ hochwertige Animationen zu erstellen, die plattformübergreifend sind. Es zielt auf bestimmte Animationselemente und Parameter ab und bietet die Möglichkeit, Interaktivität hinzuzufügen und Parameter während der Laufzeit zu ändern.

Dies sind kleine Dateien, die auf jedem Gerät verwendet werden können und ohne Qualitätsverlust skaliert werden können. Lottie-Dateien können von Entwicklern in ihrer Programmierung wiederverwendet werden.

Was kann eine Lotte?

Lottie lässt Ihre Animation auf jedem Web- oder Mobilgerät in hoher Qualität abspielen, und mit intelligenten Einstellungen lassen Sie Ihre Animation attraktiver werden.

Eine Sache, die Sie beachten sollten, ist, dass beim Erstellen für Lottie JSON-Dateien für die mobile Plattform so klein wie möglich sein müssen. Verwenden Sie wann immer möglich Erziehungstechniken.

Beim Duplizieren derselben Keyframes auf einer ähnlichen Ebene wird zusätzlicher Code hinzugefügt. Sie sollten nach Möglichkeit Pfad-Keyframe-Animationen verwenden.

Der größte Teil des Platzes wird durch das Hinzufügen von Daten für jeden Scheitelpunkt auf jedem Keyframe verbraucht.

Auto Trace oder die Wiggler-Technik geben Ihnen einen Keyframe für jeden Frame, aber eine sehr große JSON-Dateigröße kann sich negativ auf die Leistung auswirken. Sie sollten mit der Zusammensetzung ausgewogen sein, um reibungslos und effizient zu arbeiten.

Wo können Sie Lottie verwenden?

Laut dem Entwickler kann auf Lottie's von praktisch jeder Plattform aus zugegriffen werden, einschließlich des Internets und mobiler Geräte. Mit anderen Worten, sie können leicht sowohl in mobile Anwendungen als auch in webbasierte Anwendungen integriert werden.

Bei einigen Messaging-Diensten können Lottie-Animationen sogar als Aufkleber verwendet werden. Es ist nicht auf das Web oder mobile Geräte in Bezug auf technische Einschränkungen beschränkt. Bei Desktop-Anwendungen sowie einigen Smartwatches können Sie davon profitieren.

Verschiedene plattformübergreifende Plugins und Bibliotheken sind für Web, iOS, Android, Flutter, React, Vue, Angular und Sketch verfügbar. Figma, After Effects und mehr werden in Lottie-Animationsdateien unterstützt.

Warum Lottie-Animation verwenden?

Es ist nur natürlich zu überlegen, warum Sie die Lottie-Animation verwenden sollten, wenn es so viele andere Optionen gibt.

Hier ist der Grund:

Es kann überall gespielt werden

Der Lottie-Webplayer ist mit jedem Browser kompatibel, der modernes Javascript unterstützt, was bedeutet, dass Lottie auf jedem modernen Browser gespielt werden kann, der Javascript unterstützt. Da die neuesten Software-Entwicklungskits außerdem dynamische Webinhalte bieten, wird die Integration von Lottie in jedes Desktop- oder Laptop-Programm einfacher.

Es sind auch Bibliotheken verfügbar, um die Lottie-Wiedergabe in IOS-, Android- und Tizen-Plattformen zu implementieren, wodurch es möglich wird, Lottie in mobilen Anwendungen auf den meisten Smartphones und Tablets zu verwenden. Lottie-Animationen werden schnell von großen Unternehmen übernommen, um ihre mobilen Frontends zu verbessern, während Startups Lottie in ihren Produktdesigns verwenden, um sich von der Konkurrenz abzuheben.

Pflegeleicht

Lottie-Animationen werden als Klartext gespeichert, was bedeutet, dass sie von Menschen angezeigt werden können. Infolgedessen verringert der Einsatz von Lottie bei der Entwicklung von Anwendungsschnittstellen die Debugging-Zeit sowie die Gesamtzeit bis zur Bereitstellung. Darüber hinaus sind Klartext-Lottie-Dateien weniger kompliziert zu pflegen und zu optimieren, da sie keine speziellen Softwaretools erfordern.

Die Textdaten in Lottie-Animationen sind als JSON strukturiert, was bedeutet, dass sie für die Assimilation in Javascript oder jede andere Anwendungsentwicklungsumgebung bereit sind, die JSON akzeptiert, ohne dass eine zusätzliche Analyse oder Verarbeitung erforderlich ist. Infolgedessen ist Lottie das am weitesten verbreitete und portabelste animierte Grafikformat der Welt geworden.

Es ist dynamisch

Die JSON-Struktur der Lottie-Daten ermöglicht eine einfache Bearbeitung und Ersetzung ihres Inhalts in vielen Granularitätsstufen, die von Bruchwerten bis hin zu großen Teilen von Objekten reichen. Das Ersatzmaterial kann zusätzlich dynamisch von jeder Seite geladen werden. Dadurch ist Lottie derzeit das dynamischste und am weitesten verbreitete animierte Grafikformat.

Skalierbarkeit

Da herkömmliche visuelle Elemente sperrig sind, setzen viele Unternehmen sie nur sparsam in den Benutzeroberflächen von Anwendungen ein. Zu viele Grafiken können die Speicher- und Abrufkosten erhöhen, insbesondere wenn Daten kontextbezogen gesucht und sortiert werden.

Bei Verwendung in großen Lösungen können Lottie-Dateien die Kosten für Speicherung und kontextbezogenes Sortieren/Suchen minimieren. Da Lotties dynamisch sind, müssen Apps nur die Komponenten laden, die zu einem bestimmten Zeitpunkt aktualisiert werden müssen.

Größte Qualität

Es verwendet Vektoren, um die Abmessungen geometrischer Formen darzustellen, sowie Qualifizierer, um ihre Eigenschaften zu definieren und wie sie sich während der Animation bewegen. Der Lottie-Player rendert mit der nativen Auflösung des Bildschirms. Dadurch wird sichergestellt, dass Lottie-Animationen immer in der bestmöglichen Qualität angezeigt werden.

Ein Benutzer zoomt in eine Lottie-Animation und der Player zeichnet sie mit nativer Auflösung neu. Das bedeutet, dass Lottie-Animationen niemals verpixeln, egal wie vergrößert sie sind.

In einer Crux

Durch die Verwendung von Lotties können Benutzerschnittstellen erreicht werden, die schnell, dynamisch und elegant sind. Der Bandbreitenverbrauch Ihres Kunden würde als Ergebnis des geringeren Speicherbedarfs für die gehostete Komponente Ihrer Anwendung erheblich verringert.

Wenn Sie sich darauf freuen, Lottie-Animationsvideos zu erstellen, ist Webdew der beste Ort für Sie.

Bei webdew werden Erklärvideos, Charakteranimationen, 2D-Animationen und Whiteboard-Animationen umfassend von erfahrenen Animatoren und Motion-Graphic-Designern erstellt. Kontaktieren Sie uns, um mehr zu erfahren.

Herausgeber: Amruta