Problemy z wydajnością Lottie zwykle wynikają z pliku, a nie odtwarzacza. After Effects ułatwia dodawanie funkcji, których renderowanie klatka po klatce na telefonie jest kosztowne.
Zacznij od pliku. Maski i maty torowe to często największy koszt; jeśli to możliwe, zastąp je prostszymi kształtami. Usuń efekty i rozmycia, których gracz nie potrzebuje. Łącz kształty, zmniejszaj liczbę warstw i ostrożnie komponuj wstępnie. Duże osadzone obrazy zwiększają pamięć i koszt dekodowania, dlatego należy je zoptymalizować lub zastąpić wektorami. Inspektor Lottie, taki jak nasza bezpłatna przeglądarka Lottie JSON, pomaga zobaczyć, co znajduje się w pliku.
Następnie sprawdź, jak aplikacja to odtwarza. Animacje, które zapętlają się poza ekranem, w zamkniętej karcie lub w przewijanej komórce listy, nadal zużywają procesor i baterię. Wstrzymuj je, gdy nie są widoczne i zatrzymuj pętle, które nie są potrzebne. Unikaj odtwarzania dziesiątek animacji na raz.
Wybierz odpowiednie opcje dla swojej platformy. W Internecie moduły renderujące SVG i canvas działają różnie w zależności od animacji, więc przetestuj oba. Skompresowany format .lottie (dotLottie) zmniejsza rozmiar pobieranego pliku. Na Androidzie przetestuj z akceleracją sprzętową, jeśli obsługuje ją Twój odtwarzacz.
Na koniec zmierz na urządzeniu z niższej półki. Jeśli animacja jest nadal zbyt skomplikowana, może to być niewłaściwe narzędzie do tego zadania: prosta animacja CSS lub natywna może zastąpić dekoracyjną pętlę, a komponenty interaktywne można lepiej zbudować w narzędziu opartym na stanach, takim jak Rive lub ExodeUI, które tworzymy.