Lottie-Animation

Ein Mini-Leitfaden für Lottie Animation 1

Ein Lottie ist ein JSON-basiertes Animationsdatenformat, das auf jeder Plattform genauso einfach wie statische Assets verwendet werden kann. Es handelt sich um kompakte Dateien, die sich ohne Pixelung vergrößern und verkleinern lassen und auf jedem Gerät funktionieren. Das Beste daran ist, dass für Lottie-Animationen keine Programmierkenntnisse erforderlich sind!

Wie kann Lottie Animation Ihr Leben einfacher machen?

Lottie's können auf fast jeder Plattform verwendet werden, auch im Web und auf dem Handy. Daher können Sie sie sowohl in Apps als auch in Online-Websites einfach einbinden.

Lottie-Animationen können auch als Chat-Plattform-Sticker verwendet werden. JSON-Dateien sind anstelle von GIF- und PNG-Dateien kompakt; daher erhöht die Verwendung einer Lottie-Datei die Download-Geschwindigkeit und minimiert den Speicherplatzbedarf.

Sie können Vektor- und Rasterkomponenten mit Lottie mischen und zur Laufzeit Transformationen anwenden. Die Erstellung von Animationen und die Verwendung von Lottie-Animationen in ITG.digital werden Ihnen helfen, diese besser zu verstehen.

Lottie-Dateien werden in spannenden Animationen auf den meisten Landing Pages der Website verwendet.

Wie kann ich Lottie Animations am besten erstellen?

Entwurf (Schritt 1)

Zuallererst müssen Sie Ihren Animationsentwurf fertigstellen und vorbereiten. Dazu fällt mir eine Illustration eines Mädchens mit einem Hund ein. Sie mussten die Haltung anpassen, um das schwere Seufzen des Mädchens und das Klopfen ihrer Füße darzustellen. Nachdem Sie die Körperhaltung geändert haben, skizzieren Sie verschiedene Texturalternativen für das Kleid des Mädchens.

Wenn Sie sich für die Animation mit Texturen entscheiden, sollten Sie Folgendes beachten:

Die Verwendung von Vektortexturen ist vorzuziehen, da die resultierende Datei kürzer ist.

Denken Sie beim Skizzieren der Textur daran, dass die Animation umso einfacher sein sollte, je weniger kleine Punkte und Teile Sie haben. Sie können auch die Größe der fertigen Animationsdatei reduzieren, indem Sie Ihre Texturierung minimal halten.

Vermeiden Sie nach Möglichkeit die Verwendung von Masken in der Animation, da es sonst in einigen Browsern zu Problemen kommen kann.

Animieren (Schritt 2)

Die Animation ist die nächste Phase. Sie müssen einige Zeichnungen animieren und sie in JSON umwandeln, um eine Lottie-Datei zu erstellen.

Die Dinge einfach zu halten, ist der beste Ratschlag, den Sie für diese Phase bekommen können. Verwenden Sie keine Effekte, sondern animieren Sie die wichtigsten Eigenschaften der Ebene: Position, Drehung, Skalierung und Deckkraft. Auch die Pfadanimation wird einwandfrei sein.

Ihre Animationen können wiederholt oder einmalig abgespielt werden, wenn sie integriert werden.

Vergewissern Sie sich, dass Ihre Animation eine einwandfreie Schleife hat, bevor Sie sie aus After Effects exportieren, wenn Sie eine perfekte Schleife auf der Website/App haben möchten.

Animationen exportieren (Schritt 3)

Sobald Sie die Animation fertiggestellt haben, können Sie sie veröffentlichen.

1. Starten Sie Bodymovin und suchen Sie die Komposition, die Sie erstellen möchten.

2. Nehmen Sie Anpassungen an den Parametern vor.

3. Klicken Sie auf "Rendern", und Sie sind fertig!

4. Sieh dir deine Animation auf der Lottie-Dateien-Website oder in Bodymovin an.

5. Klicken Sie im Rendering auf "Demo", wenn Sie Ihre Animation jemandem zeigen wollen, der Lottie nicht kennt.

Schlussfolgerung

Mit Lottie Animation erhalten Sie fertige Animationen genau so, wie Sie sie haben wollen. Im Vergleich zu JavaScript-Animationen ist die Animation in After Effects zugänglicher und vielseitiger. Nachdem Sie sich auf vertrauenswürdigen Websites wie Seahawk Media über Lottie Animation informiert haben, können Sie bei der Gestaltung fantasievoller vorgehen.

Verwandte Beiträge

organische Suche
WordPress-Glossar
Komal Bothra

Was ist organische Suche?

Organische Suche ist der Prozess der Gewinnung von Besuchern auf Ihrer Website durch unbezahlte oder

Komal Bothra 4. Februar 2023

Was ist ein Proxy-Server?

Ein Proxy-Server ist ein Computer, der als Vermittler zwischen Ihrem Computer und

Hosting-Glossar
Komal Bothra 3. Februar 2023

Suchmaschinen-Marketing (SEM) 

Suchmaschinenmarketing (Search Engine Marketing, SEM) ist eine Form des Online-Marketings, bei der bezahlte Werbung eingesetzt wird.

SEO-Glossar
Komal Bothra 2. Februar 2023

Fallstudie: Mabry Technology Solutions

Mabry Tech ist ein Unternehmen, das sich auf die Beratung und Entwicklung innovativer Lösungen für Unternehmen spezialisiert hat. Mabry's

Fallstudie

Erste Schritte mit Seahawk

Melden Sie sich in unserer App an, um unsere Preise einzusehen und Rabatte zu erhalten.