Lottie: co to jest, animacje i jak działa na platformach mobilnych

Czym jest Lottie i jak działa

Lottie — to biblioteka z otwartym kodem źródłowym, stworzona przez Airbnb w 2015 roku do renderowania wektorowych animacji w czasie rzeczywistym. Deweloper tworzy animację w Adobe After Effects, eksportuje ją przez wtyczkę Bodymovin do JSON, a Lottie odtwarza ten JSON na urządzeniu docelowym, interpretując warstwy, kształty, przezroczystość i krzywe animacji.

W przeciwieństwie do plików wideo lub GIF, Lottie nie zależy od rozdzielczości ekranu — animacja jest renderowana wektorowo i wygląda tak samo na urządzeniach z dowolnym DPI. Rozmiar animacji JSON jest średnio 5-10 razy mniejszy niż równoważny GIF lub wideo, co jest krytyczne dla aplikacji mobilnych z ograniczonym transferem danych.

Według Airbnb Engineering, wdrożenie Lottie zmniejszyło rozmiar animacji w aplikacji o 80% w porównaniu z prekomponowanym wideo, przy czym liczba klatek pozostała 60 FPS na wszystkich obsługiwanych urządzeniach. Obecnie Lottie jest obsługiwane na iOS, Android, Flutter, React Native, Web (HTML Canvas i SVG) oraz platformach stacjonarnych.

Wydajność Lottie zapewnia natywne renderowanie: na iOS używane jest Core Animation z CALayer, na Android — własny renderer Canvas w C++ przez JNI. Pozwala to odtwarzać złożone animacje z dziesiątkami warstw bez utraty klatek nawet na urządzeniach średniej klasy. W przeciwieństwie do rozwiązań WebView (GIF, APNG, wideo), Lottie nie tworzy osobnego procesu do renderowania i nie zużywa dodatkowej pamięci na dekodowanie klatek.

Używaj Lottie do wskaźników ładowania, ikon z mikrointerakcjami, ekranów onboardingu i świątecznych animacji promocyjnych, gdzie ważna jest płynność i mały rozmiar.

Ekosystem Lottie obejmuje oficjalne odtwarzacze dla ośmiu platform, edytor LottieFiles do podglądu w przeglądarce oraz marketplace z tysiącami gotowych animacji. Deweloper może pobrać JSON, zintegrować go z projektem i dostosować kolory oraz prędkość do systemu projektowego bez otwierania After Effects. LottieFiles udostępnia również SDK do przyspieszonej integracji z możliwością ładowania animacji przez link AIR, co pozwala aktualizować animacje na urządzeniach bez publikowania nowej wersji aplikacji w App Store lub Google Play.

Format JSON Lottie i Bodymovin

Schemat JSON Lottie — to otwarty standard opisu animacji wektorowej, składający się z trzech poziomów: kompozycja (composition), warstwy (layers) i kształty (shapes). Kompozycja zawiera metadane: rozmiar płótna, liczbę klatek na sekundę i czas trwania.

Struktura JSON

Główny obiekt JSON zawiera pole layers — tablicę warstw animacji. Każda warstwa może być kształtem (Shape Layer), obrazem (Image Layer), tekstem (Text Layer) lub prekompozycją (PreComp Layer). Dla każdej warstwy określone są właściwości transformacji: pozycja, skala, obrót i przezroczystość z przypisaniem do klatek kluczowych.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

Klatki kluczowe (Keyframes) są określane za pomocą tablic z znacznikami czasu, wartościami i krzywymi Beziera do interpolacji. Bodymovin automatycznie konwertuje krzywe After Effects do formatu zrozumiałego dla Lottie, zachowując timing i funkcje ease z dokładnością do klatki.

Bodymovin — wtyczka eksportu

Bodymovin — to rozszerzenie dla Adobe After Effects, które eksportuje kompozycję do pliku JSON Lottie. Wtyczka obsługuje większość funkcji After Effects: kształty, maski, efekty, warstwy tekstowe i śledzenie. Ograniczenia dotyczą warstw 3D i niektórych wtyczek — nie są one eksportowane i wymagają uproszczenia animacji do 2D.

Integracja Lottie na iOS

Na iOS Lottie integruje się przez Swift Package Manager, CocoaPods lub Carthage. Główna klasa — LottieView dla SwiftUI i LottieAnimationView dla UIKit. Pakiet lottie-ios obejmuje obsługę animacji z pakietu, sieci i obiektów Data.

LottieView w SwiftUI

LottieView — to komponent View dla SwiftUI, który przyjmuje nazwę pliku JSON z pakietu lub URL do załadowania z sieci. Animacja jest automatycznie odtwarzana z określoną prędkością i liczbą powtórzeń.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

Dla UIKit używana jest LottieAnimationView z konfiguracją przez Interface Builder lub programowo. View obsługuje wszystkie stany animacji: play, pause, stop, a także pasek postępu do ładowania danych. LottieAnimationView można osadzać w UITableViewCell lub UICollectionViewCell dla animowanych ikon na listach — podczas przewijania komórki animacja jest wstrzymywana, a po pojawieniu się na ekranie wznawiana, co oszczędza zasoby CPU i GPU.

Nowoczesne programowanie iOS aktywnie wykorzystuje Lottie w połączeniu z SwiftUI do tworzenia animowanych ekranów powitalnych i interaktywnych elementów: podczas przewijania ekranu postęp animacji jest synchronizowany z pozycją przewijania przez ScrollViewReader. Tworzy to efekt paralaksy, w którym animacja płynnie podąża za ruchem palca użytkownika, zwiększając zaangażowanie bez używania ciężkich plików wideo.

Zarządzanie odtwarzaniem

Odtwarzacz Lottie na iOS udostępnia API do odtwarzania od określonej do określonej klatki, zmiany koloru wypełnienia/obrysu przez KeyPaths oraz nasłuchiwania zdarzeń przez LottieAnimationDelegate. Można wstrzymywać animację podczas przewijania i wznawiać po zatrzymaniu w celu optymalizacji wydajności.

Integracja Lottie na Android

Na Android Lottie jest podłączane przez zależność Gradle com.airbnb.android:lottie. Główny komponent — LottieAnimationView, który można umieścić w układzie XML jako zwykły View i skonfigurować przez atrybuty lub programowo.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

W układzie XML LottieAnimationView jest konfigurowany przez atrybuty: lottie_rawRes (odniesienie do JSON w res/raw), lottie_autoPlay, lottie_loop. Ładowanie z sieci jest obsługiwane przez lottie_url lub programowo przez setAnimationFromUrl. Wersja Androida Lottie używa własnego renderera Canvas, niezależnego od przyspieszenia sprzętowego.

Ładowanie z RawRes i sieci

Do statycznych animacji JSON umieszczany jest w res/raw i odwoływany przez RawRes. Do dynamicznych — Lottie ładuje JSON z URL lub obiektu Data z callbackiem postępu pokazującym procent załadowania. Pamięć podręczna Lottie automatycznie zapisuje załadowane animacje w pamięci, aby uniknąć ponownego ładowania przy ponownym renderowaniu.

Lottie dla Androida obsługuje animacje w RecyclerView przez LottieAnimationView osadzoną bezpośrednio w elemencie listy. W celu optymalizacji wydajności zaleca się używanie setAnimation z opóźnionym ładowaniem i wyłączanie animacji dla niewidocznych na ekranie elementów przez callback RecyclerView.OnChildAttachStateChangeListener. Zapobiega to spadkowi FPS podczas przewijania długich list z animowanymi ikonami.

Dostosowywanie i zarządzanie animacjami Lottie

Lottie udostępnia potężne API do dostosowywania gotowych animacji bez zmiany oryginalnego pliku After Effects. Pozwala to dostosować jedną animację do różnych motywów, kolorów i rozmiarów aplikacji.

Zmiana koloru przez KeyPath

Kolory wypełnienia i obrysu można zmieniać w czasie wykonania przez KeyPath — ścieżkę stringową do elementu animacji. Na przykład, aby zastąpić kolor ikony koszyka z czerwonego na niebieski, wystarczy znaleźć jej KeyPath i zastosować nową wartość. Eliminuje to potrzebę przechowywania wielu wersji tej samej animacji dla różnych schematów kolorystycznych.

Zarządzanie prędkością i postępem

Każdą animację Lottie można kontrolować pod względem prędkości (animationSpeed), postępu (setProgress) i zakresu klatek (play(fromFrame:toFrame:)). Tryb postępu pozwala synchronizować animację z gestem przewijania: im dalej przewinięty ekran, tym dalej zaawansowana animacja — to popularna technika dla ekranów powitalnych i efektów paralaksy.