Lottie: co to je, animace a jak funguje na mobilních platformách

Co je Lottie a jak funguje

Lottie — je open-source knihovna vytvořená Airbnb v roce 2015 pro vykreslování vektorových animací v reálném čase. Vývojář vytvoří animaci v Adobe After Effects, exportuje ji přes plugin Bodymovin do JSON a Lottie přehrává tento JSON na cílovém zařízení, interpretuje vrstvy, tvary, průhlednost a křivky animace.

Na rozdíl od video souborů nebo GIF, Lottie nezávisí na rozlišení obrazovky — animace je vykreslována vektorově a vypadá stejně na zařízeních s jakýmkoli DPI. Velikost JSON animace je v průměru 5-10x menší než ekvivalentní GIF nebo video, což je kritické pro mobilní aplikace s omezeným provozem.

Podle Airbnb Engineering snížilo zavedení Lottie velikost animací v aplikaci o 80% ve srovnání s Precomposed videem, přičemž snímková frekvence zůstala 60 FPS na všech podporovaných zařízeních. Dnes je Lottie podporován na iOS, Android, Flutter, React Native, Web (HTML Canvas a SVG) a desktopových platformách.

Výkon Lottie je zajištěn nativním vykreslováním: na iOS se používá Core Animation s CALayer, na Android — vlastní Canvas renderer v C++ přes JNI. To umožňuje přehrávat komplexní animace s desítkami vrstev bez ztráty snímků i na zařízeních střední třídy. Na rozdíl od WebView řešení (GIF, APNG, video), Lottie nevytváří samostatný proces pro vykreslování a nespotřebovává další paměť na dekódování snímků.

Použijte Lottie pro indikátory načítání, ikony s mikrointerakcemi, onboarding obrazovky a sváteční promo animace, kde je důležitá plynulost a malá velikost.

Ekosystém Lottie zahrnuje oficiální přehrávače pro osm platforem, editor LottieFiles pro náhled v prohlížeči a marketplace s tisíci hotových animací. Vývojář si může stáhnout JSON, integrovat jej do projektu a přizpůsobit barvy a rychlost designovému systému bez otevírání After Effects. LottieFiles také poskytuje SDK pro zrychlenou integraci s možností načítání animací přes AIR odkaz, což umožňuje aktualizovat animace na zařízeních bez publikování nové verze aplikace v App Store nebo Google Play.

JSON formát Lottie a Bodymovin

JSON schéma Lottie — je otevřený standard pro popis vektorové animace, který se skládá ze tří úrovní: kompozice (composition), vrstvy (layers) a tvary (shapes). Kompozice obsahuje metadata: velikost plátna, snímkovou frekvenci a trvání.

Struktura JSON

Kořenový JSON objekt obsahuje pole layers — pole vrstev animace. Každá vrstva může být tvar (Shape Layer), obrázek (Image Layer), text (Text Layer) nebo prekompozice (PreComp Layer). Pro každou vrstvu jsou definovány transformační vlastnosti: pozice, měřítko, rotace a průhlednost s vazbou na klíčové snímky.

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

Klíčové snímky (Keyframes) jsou zadávány poli s časovými značkami, hodnotami a Bezierovými kŕivkami pro interpolaci. Bodymovin automaticky převádí After Effects křivky do formátu srozumitelného pro Lottie, přičemž zachovává načasování a ease funkce s přesností na snímek.

Bodymovin — exportní plugin

Bodymovin — je rozšíření pro Adobe After Effects, které exportuje kompozici do Lottie JSON souboru. Plugin podporuje většinu funkcí After Effects: tvary, masky, efekty, textové vrstvy a sledování. Omezení se týkají 3D vrstev a některých pluginů — nejsou exportovány a vyžadují zjednodušení animace na 2D.

Integrace Lottie na iOS

Na iOS je Lottie integrován přes Swift Package Manager, CocoaPods nebo Carthage. Hlavní třída — LottieView pro SwiftUI a LottieAnimationView pro UIKit. Balíček lottie-ios zahrnuje podporu pro animace z balíčku, sítě a Data objektů.

LottieView ve SwiftUI

LottieView — je View komponenta pro SwiftUI, která přijímá název JSON souboru z balíčku nebo URL pro načtení ze sítě. Animace se automaticky přehrává s nastavenou rychlostí a počtem opakování.

import Lottie

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

Pro UIKit se používá LottieAnimationView s konfigurací přes Interface Builder nebo programově. View podporuje všechny stavy animace: play, pause, stop, stejně jako ukazatel průběhu pro načítání dat. LottieAnimationView lze vložit do UITableViewCell nebo UICollectionViewCell pro animované ikony v seznamech — při posouvání je animace buňky pozastavena a při zobrazení na obrazovce obnovena, což šetří CPU a GPU zdroje.

Moderní iOS vývoj aktivně využívá Lottie v kombinaci se SwiftUI pro vytváření animovaných onboarding obrazovek a interaktivních prvků: při posouvání obrazovky je průběh animace synchronizován s pozicí posouvání pomocí ScrollViewReader. To vytváří paralaxní efekt, kde animace plynule následuje pohyb prstu uživatele, čímž zvyšuje zapojení bez použití těžkých video souborů.

Řízení přehrávání

Lottie přehrávač na iOS poskytuje API pro přehrávání od konkrétního snímku po konkrétní snímek, změnu barvy výplně/obrysu přes KeyPaths a naslouchání událostem přes LottieAnimationDelegate. Můžete pozastavit animaci při posouvání a obnovit při zastavení pro optimalizaci výkonu.

Integrace Lottie na Android

Na Android je Lottie připojen přes Gradle závislost com.airbnb.android:lottie. Hlavní komponenta — LottieAnimationView, kterou lze umístit do XML rozvržení jako běžný View a konfigurovat přes atributy nebo programově.

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

V XML rozvržení je LottieAnimationView konfigurován přes atributy: lottie_rawRes (odkaz na JSON v res/raw), lottie_autoPlay, lottie_loop. Načítání ze sítě je podporováno přes lottie_url nebo programově přes setAnimationFromUrl. Android verze Lottie používá vlastní Canvas renderer, nezávislý na hardwarové akceleraci.

Načítání z RawRes a sítě

Pro statické animace je JSON umístěn v res/raw a odkazován přes RawRes. Pro dynamické animace Lottie načítá JSON z URL nebo Data objektu s callbackem průběhu ukazujícím procento načtení. Lottie cache automaticky ukládá načtené animace do paměti, aby se zabránilo opětovnému načítání při opakovaném vykreslování.

Lottie pro Android podporuje animace v RecyclerView přes LottieAnimationView vloženou přímo do prvku seznamu. Pro optimalizaci výkonu se doporučuje používat setAnimation s odloženým načítáním a vypnout animace pro neviditelné prvky na obrazovce přes callback RecyclerView.OnChildAttachStateChangeListener. To brání poklesu FPS při posouvání dlouhých seznamů s animovanými ikonami.

Přizpůsobení a správa Lottie animací

Lottie poskytuje výkonné API pro přizpůsobení hotových animací bez změny původního souboru After Effects. To umožňuje přizpůsobit jednu animaci různým tématům, barvám a velikostem aplikace.

Změna barvy přes KeyPath

Barvy výplně a obrysu lze měnit za běhu prostřednictvím KeyPath — řetězcové cesty k prvku animace. Například pro nahrazení barvy ikony košíku z červené na modrou stačí najít její KeyPath a aplikovat novou hodnotu. To odstraňuje potřebu ukládat několik verzí stejné animace pro různá barevná schémata.

Řízení rychlosti a průběhu

Každou Lottie animaci lze řídit z hlediska rychlosti (animationSpeed), průběhu (setProgress) a rozsahu snímků (play(fromFrame:toFrame:)). Režim průběhu umožňuje synchronizovat animaci s gestem posouvání: čím dále je obrazovka posunuta, tím pokročilejší je animace — to je populární technika pro onboarding a paralaxní efekty.