Erste Schritte mit Lottie.js

Das Jahrzehnt der Transformation der Webanimation: Vom Fall des Flashs bis zum Aufstieg von Lottie

Vor ungefähr zehn Jahren stand Webanimation vor einer großen Herausforderung. Adobe Flash nimmt allmählich ab, fehlt jedoch eine geeignete Alternative. Wir brauchen ein schnelles, einfaches, webfreundliches Format, mit dem große Animationspräsentationen, Cartoons und Banneranzeigen erstellt werden können.

Zum Glück hat uns Airbnb im Jahr 2014 eine Lösung zur Verfügung gestellt - lottie.js.

Schlüsselpunkte:

1. lottie.js wurde als Flash -Alternative: Vor ungefähr einem Jahrzehnt war das Gebiet der Webanimation inmitten des Wandels und es gab einen Mangel an klar Alternativen zum Erstellen von webfreundlichen Animationen. Im Jahr 2014 führte Airbnb Lottie.js vor, ein vektorbasiertes Animationsformat, mit dem schnelle, bandokluere Animationen erstellt wurden, die nahtlos auf mehreren Plattformen ausgeführt werden, darunter Web, IOS, Android, Windows und React Native. Lottie wurde von Salih Abdul-Karim von Airbnb entwickelt und bietet skalierbare und effiziente Lösungen für Vektorgrafikanimationen als Alternative zu GIF-, MPEG- oder CSS-Animationen.
2. Die Vorteile und das Ökosystem von Lottie.js: Unter den zahlreichen Webanimationsoptionen hat Lottie.js ein wachsendes Ökosystem hochwertiger visueller Animationstools und eine reibungslose, schnelle und skribierbare Fähigkeit zur Animation fällt auf. Durch die Nutzung von JSON-Dateien für Animationsanweisungen bietet Lottie einen vereinfachten Workflow, der qualitativ hochwertige und effiziente Animationen erstellt, die an die Kombination von Adobe Flashs kreativen und Bereitstellungsvorteilen erinnern.
3. Tools und praktische Anwendungsfälle zum Erstellen von Lottie-Animationen: Lottie-Animationen können über verschiedene "Lottie-fähige" Animationstools erstellt werden . Von Adobe After Effects über KeyShape und LotTiefiles bietet jedes Tool einzigartige Funktionen, Preisgestaltung und Plattformunterstützung, um die unterschiedlichen Anforderungen und das Fachwissen von Animationen zu erfüllen. Mit seinen einmaligen Preisgestaltung stellt KeyShape eine kostengünstige Lösung für Benutzer dar, die nicht oft Animation animieren, und Flow bietet ein umfassendes Paket für die Arbeit, die häufig Animation leistet. LotTiefiles bereichert das Ökosystem weiter, indem sie Gemeinschafts-, Markt- und einfache Bearbeitungsdienstprogramme zur Unterstützung der Schaffung und dem Austausch von Lottie -Animationen zur Verfügung stellen.

Was ist Lottie?

lottie.js ist ein von Airbnb Experience und dynamischer Designerin Salih Abdul-Karim erstellter Open-Source-Animationsformat. Die Lottie -Engine ist so konzipiert, dass sie im Web, iOS, Android, Windows und React Native schnelle, klare, mit niedrige Bandbreitenvektoranimationen rendern.

Kurz gesagt, wenn Sie SVG zum Erstellen von Bildern gerne verwenden, ist Lottie eine großartige Möglichkeit, diese Vektorgrafiken zu animieren. Wenn Sie GIF-, MPEG- oder CSS -Animation durch etwas Leichteres, schnelleres und skalierbareres ersetzen möchten, ist Lottie wahrscheinlich Ihre beste Antwort.

Wie von Bashir Ahmeds schönes Beispiel gezeigt, generiert Lottie reichhaltige Zeichen, leichte und reibungslose Bewegungen aus winzigen Dateien - diese Animation wird aus einer 54 -KB -Datei generiert.

Die grundlegendsten Lottie -Animationen (z. B. Bashirs) erfordern nur zwei Dateien:

1. Lottie Animation Player (lottie.js)
2. JSON -Anleitungsanweisungsdatei

Warum sollte ich Lottie wählen?

Es gibt viele Möglichkeiten, Webvektoren zu animieren - von CSS -Animationen bis hin zu Lächeln in SVGs bis hin zu Greensock, Animejs und anderen JavaScript -Bibliotheken.

Lottie hat jedoch den Vorteil von Killer "Eins plus eins ist größer als zwei":

• Das wachsende Ökosystem hochwertiger visueller Animationstools
• Fähigkeit, glatte, schnelle, effiziente und skriptierbare Animationen zu exportieren

Trotz vieler bekannter Mängel von Adobe Flash basiert sein langfristiger Erfolg auf der Kombination guter kreativer Tools mit einfacher plattformübergreifender Bereitstellung. Ich denke, Lottie hat einige der Vorteile von Flash.

Wie erstelle ich Lottie -Animation?

Da die Lottie -Datei nichts anderes als JSON -Textdateien ist, können Sie technisch direkt in jeder IDE animationscode schreiben. Tatsächlich müssen Sie ein Animationstool auswählen, das Lottie unterstützt. Hier sind meine Gedanken zu mehreren Tools, die ich ausprobiert habe.

Lottie Tool Review

• Adobe After Effects
• Haiku Animator
• fließen
• keyShape
• lottTiefiles

Meiner Meinung nach sind zwei Faktoren zu berücksichtigen, die bei der Auswahl von Lottie -Animationstools:

beachten müssen:

Ist es ein gutes Animationstool?
Ist es einfach, Lottie -Code bereitzustellen?

Ich werde diese beiden Aspekte für jedes Tool separat einführen.

... (Der folgende Inhalt hat den Einführungsteil jedes Tools im Originaltext vereinfacht und neu geschrieben, die Kerninformationen beibehalten und die Struktur angepasst, um sie reibungsloser und einfacher zu lesen. Aufgrund von Platzbeschränkungen, einige einige Detaillierte Beschreibungen werden hier weggelassen

Zusammenfassung

Wenn Sie häufig leichte Vektoranimationen erstellen müssen, ist Flow derzeit wahrscheinlich das fokussierteste und vollständige Tool zur Lottie -Entwicklung. Es hat einen klaren Workflow und die Exportoptionen sind so gut oder besser wie die meisten Konkurrenten.

Wenn Sie Adobe After Effects bereits kennen und mögen, verwenden Sie die Tools, die Sie kennen.

In meinem Fall mag ich Animation, aber das ist nicht der Hauptteil meiner Arbeitszeiten. Einige Monate sind vergangen und ich bin möglicherweise nicht Animationsprojekten ausgesetzt. Möchte ich wirklich ein monatliches Abonnement? Vielleicht ... nein.

für mich scheint KeyShape (29 US -Dollar) ein atemberaubendes Preis -Leistungs -Verhältnis zu sein, auch wenn es gut versteckt ist.

lottie.js faq

... (Der ursprüngliche FAQ -Teil wurde optimiert, um Kerninformationen zu erhalten)

Was ist Lottie.js?

Wie funktioniert Lottie.js? Die Lottie.js-Bibliothek analysiert und rendert diese JSON-Dateien in Echtzeit und erleichtert es einfach, hochwertige Animationen sowohl in Web- als auch in mobile Anwendungen zu integrieren.

Was sind die Vorteile der Verwendung von Lottie.js? Es bietet hochwertige, skalierbare und interaktive Animationen, die leicht über JavaScript gesteuert werden können.

In welchen Umgebungen kann ich Lottie.js verwenden? Es unterstützt eine Vielzahl von Plattformen und Frameworks.

Gibt es bei der Verwendung von Lottie.js eine Größe oder Leistungsüberlegungen? Die After -Effects -Animation muss jedoch für Lottie -Exporte für eine optimale Leistung optimiert werden.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Lottie.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!