Lottie ydeevneproblemer kommer normalt fra filen, ikke afspilleren. After Effects gør det nemt at tilføje funktioner, der er dyre at gengive billede for billede på en telefon.
Start med filen. Masker og banemåtter er ofte de største omkostninger; erstatte dem med enklere former, hvor det er muligt. Fjern effekter og sløringer, som afspilleren ikke har brug for. Flet former, reducer antallet af lag og forkomponér omhyggeligt. Store indlejrede billeder tilføjer hukommelse og afkodningsomkostninger, så optimer eller erstat dem med vektorer. En Lottie-inspektør, såsom vores gratis Lottie JSON-fremviser, hjælper dig med at se, hvad der er inde i en fil.
Tjek derefter, hvordan appen afspiller det. Animationer, der bliver ved med at sløjfe, når de er væk fra skærmen, inde i en lukket fane eller i en listecelle, der rullede væk, bruger stadig CPU'en og batteriet. Sæt dem på pause, når de ikke er synlige, og stop løkker, der ikke er nødvendige. Undgå at spille snesevis af animationer på én gang.
Vælg de rigtige muligheder for din platform. På nettet fungerer SVG og lærredsrendererne forskelligt afhængigt af animationen, så test begge. Det komprimerede .lottie-format (dotLottie) reducerer downloadstørrelsen. På Android, test med hardwareacceleration, hvor din afspiller understøtter det.
Mål til sidst på en low-end enhed. Hvis en animation stadig er for tung, kan det være det forkerte værktøj til opgaven: En simpel CSS eller native animation kan erstatte en dekorativ loop, og interaktive komponenter kan være bedre bygget i et tilstandsbaseret værktøj som Rive eller ExodeUI, som vi laver.