Prestatieproblemen met Lottie worden meestal veroorzaakt door het bestand, niet door de speler. After Effects maakt het gemakkelijk om functies toe te voegen die duur zijn om frame voor frame op een telefoon weer te geven.
Begin met het bestand. Maskers en trackmatten zijn vaak de grootste kostenpost; vervang ze waar mogelijk door eenvoudigere vormen. Verwijder effecten en vervagingen die de speler niet nodig heeft. Voeg vormen samen, verminder het aantal lagen en stel zorgvuldig vooraf samen. Grote ingebedde afbeeldingen voegen geheugen- en decoderingskosten toe, dus optimaliseer of vervang ze door vectoren. Een Lottie-inspecteur, zoals onze gratis Lottie JSON-viewer, helpt u te zien wat er in een bestand staat.
Controleer vervolgens hoe de app het afspeelt. Animaties die blijven herhalen wanneer ze buiten het scherm zijn, in een gesloten tabblad of in een lijstcel die is weggescrolld, gebruiken nog steeds de CPU en de batterij. Pauzeer ze wanneer ze niet zichtbaar zijn en stop lussen die niet nodig zijn. Speel geen tientallen animaties tegelijk af.
Kies de juiste opties voor uw platform. Op internet presteren de SVG- en canvas-renderers verschillend, afhankelijk van de animatie, dus test beide. Het gecomprimeerde .lottie-formaat (dotLottie) verkleint de downloadgrootte. Test op Android met hardwareversnelling waar uw speler dit ondersteunt.
Meet ten slotte op een low-end apparaat. Als een animatie nog steeds te zwaar is, kan het de verkeerde tool zijn voor de klus: een eenvoudige CSS of native animatie kan een decoratieve lus vervangen, en interactieve componenten kunnen beter worden ingebouwd in een op status gebaseerde tool zoals Rive of ExodeUI, die we maken.