Lottie: ce este, animații și cum funcționează pe platforme mobile

Ce este Lottie și cum funcționează

Lottie — este o bibliotecă open-source creată de Airbnb în 2015 pentru randarea animațiilor vectoriale în timp real. Dezvoltatorul creează animația în Adobe After Effects, o exportă prin pluginul Bodymovin în JSON, iar Lottie redă acest JSON pe dispozitivul țintă, interpretând straturi, forme, transparență și curbe de animație.

Spre deosebire de fișierele video sau GIF, Lottie nu depinde de rezoluția ecranului — animația este randată vectorial și arată la fel pe dispozitive cu orice DPI. Dimensiunea animației JSON este în medie de 5-10 ori mai mică decât un GIF sau video echivalent, ceea ce este critic pentru aplicațiile mobile cu trafic limitat.

Potrivit Airbnb Engineering, implementarea Lottie a redus dimensiunea animațiilor în aplicație cu 80% față de video Precomposed, în timp ce rata de cadre a rămas 60 FPS pe toate dispozitivele suportate. Astăzi Lottie este suportat pe iOS, Android, Flutter, React Native, Web (HTML Canvas și SVG) și platforme desktop.

Performanța Lottie este asigurată de randarea nativă: pe iOS se utilizează Core Animation cu CALayer, pe Android — propriul renderer Canvas în C++ prin JNI. Acest lucru permite redarea animațiilor complexe cu zeci de straturi fără pierdere de cadre chiar și pe dispozitive de gamă medie. Spre deosebire de soluțiile WebView (GIF, APNG, video), Lottie nu creează un proces separat pentru randare și nu consumă memorie suplimentară pentru decodificarea cadrelor.

Utilizați Lottie pentru indicatoare de încărcare, pictograme cu micro-interacțiuni, ecrane de onboarding și animații promoționale de sărbători, unde netezimea și dimensiunea mică sunt importante.

Ecosistemul Lottie include playere oficiale pentru opt platforme, editorul LottieFiles pentru previzualizare în browser și un marketplace cu mii de animații gata făcute. Dezvoltatorul poate descărca JSON, îl poate integra în proiect și poate ajusta culorile și viteza conform sistemului de design fără a deschide After Effects. LottieFiles oferă, de asemenea, un SDK pentru integrare accelerată cu posibilitatea de a încărca animații prin link AIR, ceea ce permite actualizarea animațiilor pe dispozitive fără a publica o nouă versiune a aplicației în App Store sau Google Play.

Formatul JSON Lottie și Bodymovin

Schema JSON Lottie — este un standard deschis pentru descrierea animației vectoriale, constând din trei niveluri: compoziție (composition), straturi (layers) și forme (shapes). Compoziția conține metadate: dimensiunea pânzei, rata de cadre și durata.

Structura JSON

Obiectul rădăcină JSON conține câmpul layers — un tablou de straturi de animație. Fiecare strat poate fi o formă (Shape Layer), o imagine (Image Layer), text (Text Layer) sau o precompoziție (PreComp Layer). Pentru fiecare strat sunt definite proprietățile de transformare: poziție, scară, rotație și transparență cu legare la cadre cheie.

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

Cadrele cheie (Keyframes) sunt specificate cu tablouri de marcaje temporale, valori și curbe Bezier pentru interpolare. Bodymovin convertește automat curbele After Effects într-un format inteligibil pentru Lottie, păstrând timing-ul și funcțiile ease cu precizie de cadru.

Bodymovin — plugin de export

Bodymovin — este o extensie pentru Adobe After Effects care exportă compoziția în fișier JSON Lottie. Pluginul suportă majoritatea capacităților After Effects: forme, măști, efecte, straturi de text și urmărire. Limitările se referă la straturile 3D și unele pluginuri — acestea nu sunt exportate și necesită simplificarea animației la 2D.

Integrarea Lottie pe iOS

Pe iOS Lottie se integrează prin Swift Package Manager, CocoaPods sau Carthage. Clasa principală — LottieView pentru SwiftUI și LottieAnimationView pentru UIKit. Pachetul lottie-ios include suport pentru animații din pachet, rețea și obiecte Data.

LottieView în SwiftUI

LottieView — este o componentă View pentru SwiftUI care primește numele fișierului JSON din pachet sau un URL pentru încărcare din rețea. Animația este redată automat cu viteza și numărul de repetiții specificate.

import Lottie

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

Pentru UIKit se utilizează LottieAnimationView cu configurare prin Interface Builder sau programatic. View suportă toate stările de animație: play, pause, stop, precum și o bară de progres pentru încărcarea datelor. LottieAnimationView poate fi încorporată în UITableViewCell sau UICollectionViewCell pentru pictograme animate în liste — la derulare, animația celulei este suspendată, iar la apariția pe ecran este reluată, economisind resurse CPU și GPU.

Dezvoltarea modernă iOS utilizează activ Lottie în combinație cu SwiftUI pentru a crea ecrane de onboarding animate și elemente interactive: la derularea ecranului, progresul animației este sincronizat cu poziția de derulare prin ScrollViewReader. Acest lucru creează un efect de paralaxă în care animația urmărește continuu mișcarea degetului utilizatorului, crescând implicarea fără a utiliza fișiere video grele.

Gestionarea redării

Playerul Lottie pe iOS oferă API pentru redare de la un cadru specific la un cadru specific, schimbarea culorii de umplere/contur prin KeyPaths și ascultarea evenimentelor prin LottieAnimationDelegate. Puteți suspenda animația la derulare și relua la oprire pentru optimizarea performanței.

Integrarea Lottie pe Android

Pe Android Lottie se conectează prin dependența Gradle com.airbnb.android:lottie. Componenta principală — LottieAnimationView, care poate fi plasată în layout-ul XML ca un View obișnuit și configurată prin atribute sau programatic.

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

În layout-ul XML LottieAnimationView se configurează prin atribute: lottie_rawRes (referință la JSON în res/raw), lottie_autoPlay, lottie_loop. Încărcarea din rețea este suportată prin lottie_url sau programatic prin setAnimationFromUrl. Versiunea Android a Lottie utilizează propriul renderer Canvas, independent de accelerarea hardware.

Încărcarea din RawRes și rețea

Pentru animații statice, JSON este plasat în res/raw și referit prin RawRes. Pentru animații dinamice, Lottie încarcă JSON din URL sau obiect Data cu un callback de progres care arată procentul de încărcare. Cache-ul Lottie salvează automat animațiile încărcate în memorie pentru a evita reîncărcarea la rerandare.

Lottie pentru Android suportă animații în RecyclerView prin LottieAnimationView încorporată direct în elementul de listă. Pentru optimizarea performanței, se recomandă utilizarea setAnimation cu încărcare întârziată și dezactivarea animației pentru elementele invizibile pe ecran prin callback-ul RecyclerView.OnChildAttachStateChangeListener. Acest lucru previne scăderea FPS la derularea listelor lungi cu pictograme animate.

Personalizarea și gestionarea animațiilor Lottie

Lottie oferă un API puternic pentru personalizarea animațiilor gata făcute fără a modifica fișierul original After Effects. Acest lucru permite adaptarea unei singure animații la diferite teme, culori și dimensiuni ale aplicației.

Schimbarea culorii prin KeyPath

Culorile de umplere și contur pot fi schimbate în runtime prin KeyPath — o cale de șir către elementul de animație. De exemplu, pentru a înlocui culoarea pictogramei coșului din roșu în albastru, este suficient să găsiți KeyPath-ul său și să aplicați o nouă valoare. Acest lucru elimină necesitatea stocării mai multor versiuni ale aceleiași animații pentru diferite scheme de culori.

Gestionarea vitezei și progresului

Fiecare animație Lottie poate fi controlată după viteză (animationSpeed), progres (setProgress) și interval de cadre (play(fromFrame:toFrame:)). Modul de progres permite sincronizarea animației cu gestul de derulare: cu cât ecranul este mai derulat, cu atât animația este mai avansată — aceasta este o tehnică populară pentru ecrane de onboarding și efecte de paralaxă.