Lottie-Leistungsprobleme sind normalerweise auf die Datei zurückzuführen, nicht auf den Player. After Effects erleichtert das Hinzufügen von Funktionen, deren Bild-für-Bild-Rendering auf einem Telefon teuer ist.
Beginnen Sie mit der Datei. Masken und Spurmatten sind oft die größten Kosten; Ersetzen Sie sie nach Möglichkeit durch einfachere Formen. Entfernen Sie Effekte und Unschärfen, die der Player nicht benötigt. Formen zusammenführen, Anzahl der Ebenen reduzieren und sorgfältig vorkomponieren. Große eingebettete Bilder verursachen zusätzliche Speicher- und Dekodierungskosten. Optimieren oder ersetzen Sie sie daher durch Vektoren. Ein Lottie-Inspektor, wie unser kostenloser Lottie JSON-Viewer, hilft Ihnen zu sehen, was sich in einer Datei befindet.
Überprüfen Sie dann, wie die App es abspielt. Animationen, die sich außerhalb des Bildschirms, in einem geschlossenen Tab oder in einer weggescrollten Listenzelle ständig wiederholen, verbrauchen immer noch CPU und Akku. Halten Sie sie an, wenn sie nicht sichtbar sind, und stoppen Sie Schleifen, die nicht benötigt werden. Vermeiden Sie es, Dutzende Animationen gleichzeitig abzuspielen.
Wählen Sie die richtigen Optionen für Ihre Plattform. Im Web funktionieren die Renderer SVG und Canvas je nach Animation unterschiedlich, also testen Sie beide. Das komprimierte .lottie-Format (dotLottie) reduziert die Downloadgröße. Testen Sie unter Android die Hardwarebeschleunigung dort, wo Ihr Player sie unterstützt.
Messen Sie abschließend an einem Low-End-Gerät. Wenn eine Animation immer noch zu umfangreich ist, ist sie möglicherweise das falsche Tool für die Aufgabe: Eine einfache CSS- oder native Animation kann eine dekorative Schleife ersetzen, und interaktive Komponenten lassen sich möglicherweise besser in einem zustandsbasierten Tool wie Rive oder ExodeUI erstellen, das wir erstellen.