Lottie prestandaproblem kommer vanligtvis från filen, inte spelaren. After Effects gör det enkelt att lägga till funktioner som är dyra att rendera ruta för ruta på en telefon.
Börja med filen. Masker och bandmattor är ofta den största kostnaden; ersätt dem med enklare former där det är möjligt. Ta bort effekter och oskärpa som spelaren inte behöver. Slå samman former, minska antalet lager och förkomponera noggrant. Stora inbäddade bilder lägger till minne och avkodningskostnader, så optimera eller ersätt dem med vektorer. En Lottie-inspektör, som vår gratis Lottie JSON-visare, hjälper dig att se vad som finns i en fil.
Kontrollera sedan hur appen spelar det. Animationer som fortsätter att loopa när de är utanför skärmen, inuti en stängd flik eller i en listcell som rullade bort använder fortfarande CPU och batteri. Pausa dem när de inte syns och stoppa slingor som inte behövs. Undvik att spela dussintals animationer samtidigt.
Välj rätt alternativ för din plattform. På webben fungerar SVG och canvas-renderare olika beroende på animeringen, så testa båda. Det komprimerade .lottie-formatet (dotLottie) minskar nedladdningsstorleken. På Android testar du med hårdvaruacceleration där din spelare stöder det.
Slutligen, mät på en low-end enhet. Om en animation fortfarande är för tung kan det vara fel verktyg för jobbet: en enkel CSS eller inbyggd animation kan ersätta en dekorativ loop, och interaktiva komponenter kan byggas bättre i ett tillståndsbaserat verktyg som Rive eller ExodeUI, som vi gör.