I problemi di prestazioni di Lottie di solito derivano dal file, non dal lettore. After Effects semplifica l'aggiunta di funzionalità costose da eseguire il rendering fotogramma per fotogramma su un telefono.
Inizia con il file. Maschere e mascherini rappresentano spesso il costo maggiore; sostituirli con forme più semplici ove possibile. Rimuovi gli effetti e le sfocature di cui il giocatore non ha bisogno. Unisci le forme, riduci il numero di livelli e precomponi attentamente. Le immagini incorporate di grandi dimensioni aggiungono memoria e costi di decodifica, quindi ottimizzale o sostituiscile con vettori. Un ispettore Lottie, come il nostro visualizzatore Lottie JSON gratuito, ti aiuta a vedere cosa c'è all'interno di un file.
Quindi controlla come viene riprodotto dall'app. Le animazioni che continuano a ripetersi quando fuori dallo schermo, all'interno di una scheda chiusa o in una cella di elenco che scorre via utilizzano comunque la CPU e la batteria. Mettili in pausa quando non sono visibili e interrompi i loop che non sono necessari. Evita di riprodurre dozzine di animazioni contemporaneamente.
Scegli le opzioni giuste per la tua piattaforma. Sul Web, i renderer SVG e Canvas funzionano in modo diverso a seconda dell'animazione, quindi testali entrambi. Il formato compresso .lottie (dotLottie) riduce le dimensioni del download. Su Android, prova con l'accelerazione hardware dove il tuo lettore la supporta.
Infine, misura su un dispositivo di fascia bassa. Se un'animazione è ancora troppo pesante, potrebbe essere lo strumento sbagliato per il lavoro: una semplice CSS o un'animazione nativa può sostituire un loop decorativo e i componenti interattivi potrebbero essere meglio integrati in uno strumento basato sullo stato come Rive o ExodeUI, che realizziamo.