Ein Lottie ist ein JSON-basiertes Animationsdatenformat, das genauso einfach wie statische Assets auf jeder Plattform verwendet werden kann. Es handelt sich um kompakte Dateien, die ohne Pixelierung vergrößert und verkleinert werden können und auf jedem Gerät ausgeführt werden können. Das Beste daran ist, dass für Lottie-Animationen keine Programmierkenntnisse erforderlich sind!
Wie kann Lottie Animation Ihr Leben einfacher machen?
Lottie's kann auf fast jeder Plattform verwendet werden, einschließlich im Internet und auf Mobilgeräten. Dadurch können Sie sie einfach in Apps und Online-Sites integrieren.
Lottie-Animationen können auch als Aufkleber für Chat-Plattformen verwendet werden. JSON-Dateien sind kompakt anstelle von GIF- und PNG-Dateien; Daher erhöht die Verwendung einer Lottie-Datei die Download-Geschwindigkeit und minimiert den Speicherplatzverbrauch.
Sie können Vektor- und Rasterkomponenten mit Lottie mischen und zur Laufzeit Transformationen anwenden. Das Erstellen von Animationen und die Verwendung von Lottie-Animationen in ITG.digital wird Ihnen helfen, besser zu verstehen.
Lottie-Dateien werden in spannenden Animationen auf den meisten Landingpages der Website verwendet.
Wie erstellt man Lottie-Animationen am besten?
Design (Schritt 1)
Zuallererst müssen Sie Ihr Animationsdesign fertigstellen und vorbereiten. Mir kommt die Illustration eines Mädchens mit einem Hund in den Sinn. Sie mussten die Haltung anpassen, um dem schweren Seufzen und dem Klopfen des Mädchens mit den Füßen Rechnung zu tragen. Skizzieren Sie nach dem Ändern der Haltung verschiedene Texturalternativen für das Kleid des Mädchens.
Wenn Sie sich für die Animation mithilfe von Texturen entscheiden, sollten Sie Folgendes beachten:
Die Verwendung von Vektortexturen ist vorzuziehen, da die resultierende Datei kürzer ist.
Bitte denken Sie beim Skizzieren der Textur daran, dass die Animation umso einfacher sein sollte, je mehr kleinere Punkte und Teile Sie haben. Sie können auch die Größe der fertigen Animationsdatei reduzieren, indem Sie die Texturierung minimal halten.
Vermeiden Sie nach Möglichkeit die Verwendung von Masken in der Animation. Andernfalls kann es in einigen Browsern zu Problemen kommen.
Animieren (Schritt 2)
Die Animation ist die nächste Phase. Sie müssen einige Zeichnungen animieren und in JSON umwandeln, um eine Lottie-Datei zu erstellen.
Die Dinge einfach zu halten, ist der differenzierteste Rat, den Sie für diese Phase bekommen können. Anstatt Effekte zu verwenden, animieren Sie die primären Eigenschaften der Ebene: Position, Drehung, Skalierung und Deckkraft. Auch die Pfadanimation wird einwandfrei sein.
Ihre Animationen können bei der Integration wiederholt oder einmal abgespielt werden.
Stellen Sie sicher, dass Ihre Animation eine einwandfreie Schleife hat, bevor Sie sie aus After Effects exportieren, wenn Sie eine perfekte Schleife auf der Website/App wünschen.
Animationen exportieren (Schritt 3)
Sobald Sie die Animation fertiggestellt haben, ist es an der Zeit, Animationen zu veröffentlichen.
1. Starten Sie Bodymovin und suchen Sie nach der Komposition, die Sie erstellen möchten.
2. Nehmen Sie Anpassungen an den Parametern vor.
3. Klicken Sie auf „Rendern“, und schon sind Sie fertig!
4. Schauen Sie sich Ihre Animation auf der Lottie-Dateienseite oder in Bodymovin an.
5. Klicken Sie im Rendering auf „Demo“, wenn Sie Ihre Animation jemandem zeigen möchten, der Lottie nicht kennt.
Abschluss
Erhalten Sie mit Lottie Animation endgültige Animationen genau so, wie Sie sie möchten. Im Vergleich zu JavaScript-Animationen sind Animationen in After Effects zugänglicher und vielseitiger. Seahawk Media mehr über Lottie Animation erfahren, können Sie im Designprozess einfallsreicher sein .
