Lottie: mi ez, animációk és hogyan működik mobil platformokon

Mi az a Lottie és hogyan működik

Lottie — egy nyílt forráskódú könyvtár, amelyet az Airbnb hozott létre 2015-ben vektoros animációk valós idejű megjelenítésére. A fejlesztő létrehozza az animációt az Adobe After Effectsben, exportálja a Bodymovin pluginon keresztül JSON-ba, és a Lottie lejátszza ezt a JSON-t a cél eszközön, értelmezve a rétegeket, alakzatokat, átlátszóságot és animációs görbéket.

Ellentétben a videofájlokkal vagy GIF-ekkel, a Lottie nem függ a képernyő felbontásától — az animáció vektorosan jelenik meg és ugyanúgy néz ki bármilyen DPI-jű eszközön. A JSON-animáció mérete átlagosan 5-10-szer kisebb, mint egy egyenértékű GIF vagy videó, ami kritikus a korlátozott adatforgalmú mobilalkalmazásoknál.

Az Airbnb Engineering szerint a Lottie bevezetése 80%-kal csökkentette az animációk méretét az alkalmazásban a Precomposed videóhoz képest, miközben a képkockasebesség 60 FPS maradt az összes támogatott eszközön. Ma a Lottie támogatott iOS, Android, Flutter, React Native, Web (HTML Canvas és SVG) és asztali platformokon.

A Lottie teljesítményét a natív megjelenítés biztosítja: iOS-en a Core Animation CALayerrel, Androidon — saját Canvas renderelő C++-ban JNI-n keresztül. Ez lehetővé teszi összetett animációk lejátszását tucatnyi réteggel kockaveszteség nélkül még középkategóriás eszközökön is. A WebView megoldásokkal (GIF, APNG, videó) ellentétben a Lottie nem hoz lére külön folyamatot a megjelenítéshez, és nem fogyaszt többletmemóriát a kockák dekódolásához.

Használja a Lottie-t töltőjelzőkhöz, mikro-interakciós ikonokhoz, onboarding képernyőkhöz és ünnepi promóciós animációkhoz, ahol a simaság és a kis méret fontos.

A Lottie ökoszisztéma tartalmaz hivatalos lejátszókat nyolc platformhoz, LottieFiles szerkesztőt a böngészőben történő előnézethez és egy piacteret ezer kész animációval. A fejlesztő letöltheti a JSON-t, integrálhatja a projektbe, és beállíthatja a színeket és sebességet a tervezési rendszerhez anélkül, hogy megnyitná az After Effects-t. A LottieFiles SDK-t is biztosít a gyorsított integrációhoz, lehetővé téve az animációk betöltését AIR linken keresztül, ami lehetővé teszi az animációk frissítését az eszközökön anélkül, hogy új alkalmazásverziót kellene közzétenni az App Store-ban vagy a Google Play-ben.

A Lottie JSON formátum és Bodymovin

A Lottie JSON séma — egy nyílt szabvány a vektoros animáció leírására, három szintből áll: kompozíció (composition), rétegek (layers) és alakzatok (shapes). A kompozíció metaadatokat tartalmaz: vászonméret, képkockasebesség és időtartam.

JSON struktúra

A JSON gyökérobjektum tartalmazza a layers mezőt — az animációs rétegek tömbjét. Minden réteg lehet alakzat (Shape Layer), kép (Image Layer), szöveg (Text Layer) vagy előkompozíció (PreComp Layer). Minden réteghez transzformációs tulajdonságok vannak meghatározva: pozíció, méretarány, forgatás és átlátszóság kulcskockákhoz kötve.

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

A kulcskockák (Keyframes) időbélyegek, értékek és Bezier-görbék tömbjeivel vannak megadva az interpolációhoz. A Bodymovin automatikusan konvertálja az After Effects görbéit a Lottie által érthető formátumba, megtartva az időzítést és az ease függvényeket kockapontossággal.

Bodymovin — export plugin

Bodymovin — egy bővítmény az Adobe After Effectshez, amely a kompozíciót Lottie JSON fájlba exportálja. A plugin támogatja az After Effects legtöbb funkcióját: alakzatok, maszkok, effektek, szövegrétegek és követés. A korlátozások a 3D rétegekre és néhány pluginre vonatkoznak — ezek nem exportálódnak, és az animáció 2D-re egyszerűsítését igénylik.

Lottie integráció iOS-en

iOS-en a Lottie a Swift Package Manageren, CocoaPods-on vagy Carthage-en keresztül integrálódik. A fő osztály — LottieView SwiftUI-hoz és LottieAnimationView UIKit-hez. A lottie-ios csomag támogatja az animációkat a bundle-ből, hálózatról és Data objektumokból.

LottieView SwiftUI-ban

LottieView — egy View komponens SwiftUI-hoz, amely elfogadja a JSON fájl nevét a bundle-ből vagy egy URL-t a hálózatról történő betöltéshez. Az animáció automatikusan lejátszódik a megadott sebességgel és ismétlésszámmal.

import Lottie

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

UIKit esetén a LottieAnimationView használatos konfigurációval az Interface Builderen keresztül vagy programozottan. A View támogatja az összes animációs állapotot: play, pause, stop, valamint egy folyamatjelző sávot az adatok betöltéséhez. A LottieAnimationView beágyazható UITableViewCell-be vagy UICollectionViewCell-be animált ikonokhoz listákban — görgetéskor a cella animációja szünetel, a képernyőn való megjelenéskor pedig folytatódik, ami CPU és GPU erőforrásokat takarít meg.

A modern iOS fejlesztés aktívan használja a Lottie-t a SwiftUI-val kombinálva animált onboarding képernyők és interaktív elemek létrehozásához: a képernyő görgetésekor az animáció elŔrehaladása szinkronizálódik a görgetési pozícióval a ScrollViewReader segítségével. Ez parallaxis hatást hoz lére, ahol az animáció folyamatosan követi a felhasználó ujjának mozgását, növelve az elköteleződést nehéz videofájlok használata nélkül.

Lejátszás kezelése

A Lottie lejátszó iOS-en API-t biztosít a lejátszáshoz egy adott kockától egy adott kockáig, a kitöltés/körvonal színének megváltoztatásához KeyPath-eken keresztül, és események figyeléséhez a LottieAnimationDelegate-on keresztül. Szüneteltetheti az animációt görgetéskor, és folytathatja megálláskor a teljesítmény optimalizálása érdekében.

Lottie integráció Androidon

Androidon a Lottie a com.airbnb.android:lottie Gradle függőségen keresztül csatlakozik. A fő komponens — LottieAnimationView, amely elhelyezhető az XML elrendezésben mint egy szokásos View, és konfigurálható attribútumokon keresztül vagy programozottan.

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

Az XML elrendezésben a LottieAnimationView attribútumokon keresztül konfigurálható: lottie_rawRes (hivatkozás a JSON-ra a res/raw-ban), lottie_autoPlay, lottie_loop. Betöltés a hálózatról támogatott a lottie_url-en vagy programozottan a setAnimationFromUrl-en keresztül. A Lottie Android verziója saját Canvas renderelőt használ, függetlenül a hardveres gyorsítástól.

Betöltés RawRes-ből és hálózatról

Statikus animációkhoz a JSON a res/raw-ba kerül, és a RawRes-en keresztül hivatkoznak rá. Dinamikus animációkhoz a Lottie betölti a JSON-t URL-ből vagy Data objektumból egy folyamatjelző visszahívással, amely a betöltés százalékát mutatja. A Lottie győrűtár automatikusan elmenti a betöltött animációkat a memóriába, hogy elkerülje az újratöltést ismételt megjelenítéskor.

A Lottie Androidon támogatja az animációt RecyclerView-ban a LottieAnimationView-n keresztül, amely közvetlenül a lista elemébe van ágyazva. A teljesítmény optimalizálása érdekében ajánlott a setAnimation használata késleltetett betöltéssel, és az animáció kikapcsolása a nem látható elemeknél a RecyclerView.OnChildAttachStateChangeListener visszahíváson keresztül. Ez megakadályozza az FPS csökkenését hosszú listák animált ikonokkal történő görgetésekor.

Lottie-animációk testreszabása és kezelése

A Lottie hatékony API-t biztosít a kész animációk testreszabásához anélkül, hogy módosítaná az eredeti After Effects fájlt. Ez lehetővé teszi egyetlen animáció hozzáigazítását különböző témákhoz, színekhez és alkalmazásméretekhez.

Szín változtatása KeyPath-en keresztül

A kitöltés és körvonal színei futási időben megváltoztathatók a KeyPath-en keresztül — egy sztring útvonalon az animációs elemhez. Például a kosár ikon színének pirosról kékre váltásához elég megtalálni a KeyPath-jét és alkalmazni egy új értéket. Ez kiküszöböli annak szükségességét, hogy ugyanazon animáció több verzióját tároljuk különböző színsémákhoz.

Sebesség és elŔrehaladás kezelése

Minden Lottie-animáció vezérelhető sebesség (animationSpeed), elŔrehaladás (setProgress) és kockatartomány (play(fromFrame:toFrame:)) szerint. Az elŔrehaladás mód lehetővé teszi az animáció szinkronizálását a görgető gesztussal: minél távolabb van görgetve a képernyő, annál elŔrehaladottabb az animáció — ez népszerű technika onboarding és parallaxis effektekhez.