Lottie: шта је то, анимације и како ради на мобилним платформама

Шта је Lottie и како ради

Lottie — то је библиотека отвореног кода, створена од стране Airbnb 2015. године за рендеровање векторских анимација у реалном времену. Програмер креира анимацију у Adobe After Effects, извози је кроз Bodymovin plugin у JSON, а Lottie репродукује тај JSON на циљном уређају, интерпретирајући слојеве, облике, провидност и криве анимације.

За разлику од видео датотека или GIF-а, Lottie не зависи од резолуције екрана — анимација се рендерује векторски и изгледа исто на уређајима са било којим DPI. Величина JSON анимације је у просеку 5-10 пута мања од еквивалентног GIF-а или видеа, што је критично за мобилне апликације са ограниченим саобраћајем.

Према Airbnb Engineering-у, увођење Lottie-ја смањило је величину анимација у апликацији за 80% у поређењу са Precomposed видео записом, док је брзина кадрова остала 60 FPS на свим подржаним уређајима. Данас је Lottie подржан на iOS, Android, Flutter, React Native, Web (HTML Canvas и SVG) и десктоп платформама.

Перформансе Lottie-ја обезбеђује нативни рендеринг: на iOS-у се користи Core Animation са CALayer, на Android-у — сопствени Canvas рендерер на C++ кроз JNI. То омогућава репродукцију сложених анимација са десетинама слојева без губитка кадрова чак и на уређајима средњег сегмента. За разлику од WebView решења (GIF, APNG, видео), Lottie не ствара засебан процес за рендеровање и не троши додатну меморију на декодирање кадрова.

Користите Lottie за индикаторе учитавања, иконе са микро-интеракцијама, onboarding екране и празничне промо анимације, где су важни глаткоћа и мала величина.

Екосистем Lottie-ја укључује званичне плејере за осам платформи, уређивач LottieFiles за преглед у прегледачу и маркетплејс са хиљадама готових анимација. Програмер може преузети JSON, интегрисати га у пројекат и подесити боје и брзину према систему дизајна без отварања After Effects-а. LottieFiles такође пружа SDK за убрзану интеграцију са могућношћу учитавања анимација путем AIR линка, што омогућава ажурирање анимација на уређајима без објављивања нове верзије апликације у App Store или Google Play.

JSON формат Lottie и Bodymovin

JSON шема Lottie — то је отворени стандард описа векторске анимације, који се састоји од три нивоа: композиција (composition), слојеви (layers) и облици (shapes). Композиција садржи метаподатке: величину платна, брзину кадрова и трајање.

Структура JSON-а

Коренски JSON објекат садржи поље layers — низ слојева анимације. Сваки слој може бити облик (Shape Layer), слика (Image Layer), текст (Text Layer) или прекомпозиција (PreComp Layer). За сваки слој су дефинисана transform својства: позиција, скала, ротација и провидност са везивањем за кључне кадрове.

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

Кључни кадрови (Keyframes) се задају низовима са временским ознакама, вредностима и Bezier кривама за интерполацију. Bodymovin аутоматски конвертује After Effects криве у формат разумљив Lottie-ју, чувајући timing и ease функције са прецизношћу до кадра.

Bodymovin — plugin за извоз

Bodymovin — то је проширење за Adobe After Effects које извози композицију у Lottie JSON датотеку. Plugin подржава већину могућности After Effects-а: облике, маске, ефекте, текстуалне слојеве и праћење. Ограничења се односе на 3D слојеве и неке plugin-е — они се не извозе и захтевају поједностављење анимације на 2D.

Интеграција Lottie на iOS

На iOS-у Lottie се интегрише кроз Swift Package Manager, CocoaPods или Carthage. Главна класа — LottieView за SwiftUI и LottieAnimationView за UIKit. lottie-ios пакет укључује подршку за анимације из пакета, мреже и Data објеката.

LottieView у SwiftUI

LottieView — то је View компонента за SwiftUI која прихвата име JSON датотеке из пакета или URL за учитавање из мреже. Анимација се аутоматски репродукује са одређеном брзином и бројем понављања.

import Lottie

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

За UIKit се користи LottieAnimationView са подешавањем кроз Interface Builder или програмски. View подржава сва стања анимације: play, pause, stop, као и траку напретка за учитавање података. LottieAnimationView се може уградити у UITableViewCell или UICollectionViewCell за анимиране иконе на листама — при скроловању ћелије анимација се паузира, а при појављивању на екрану наставља, што штеди ресурсе CPU и GPU.

Савремени iOS развој активно користи Lottie у комбинацији са SwiftUI за креирање анимираних onboarding екрана и интерактивних елемената: при скроловању екрана напредак анимације се синхронизује са позицијом скроловања кроз ScrollViewReader. То ствара ефекат паралаксе у којем анимација непрекидно прати покрет прста корисника, повећавајући ангажованост без коришћења тешких видео датотека.

Управљање репродукцијом

Lottie плејер на iOS-у пружа API за репродукцију од одређеног до одређеног кадра, промену боје испуне/контуре кроз KeyPaths и ослушкивање догађаја кроз LottieAnimationDelegate. Можете паузирати анимацију при скроловању и наставити при заустављању ради оптимизације перформанси.

Интеграција Lottie на Android

На Android-у Lottie се повезује кроз Gradle зависност com.airbnb.android:lottie. Главна компонента — LottieAnimationView, која се може поставити у XML распоред као обичан View и подесити кроз атрибуте или програмски.

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

У XML распореду LottieAnimationView се подешава кроз атрибуте: lottie_rawRes (референца на JSON у res/raw), lottie_autoPlay, lottie_loop. Учитавање из мреже је подржано кроз lottie_url или програмски кроз setAnimationFromUrl. Android верзија Lottie-ја користи сопствени Canvas рендерер, независан од хардверског убрзања.

Учитавање из RawRes и мреже

За статичке анимације JSON се поставља у res/raw и референцира кроз RawRes. За динамичке — Lottie учитава JSON из URL-а или Data објекта са повратним позивом напретка који показује проценат учитавања. Lottie кеш аутоматски чува учитане анимације у меморији како би избегао поновно учитавање при поновном рендеровању.

Lottie за Android подржава анимацију у RecyclerView кроз LottieAnimationView уграђену директно у елемент листе. За оптимизацију перформанси препоручује се коришћење setAnimation са одложеним учитавањем и искључивање анимације за невидљиве елементе на екрану кроз повратни позив RecyclerView.OnChildAttachStateChangeListener. То спречава пад FPS-а при скроловању дугих листи са анимираним иконицама.

Прилагођавање и управљање Lottie анимацијама

Lottie пружа моћан API за прилагођавање готових анимација без промене оригиналне After Effects датотеке. То омогућава прилагођавање једне анимације различитим темама, бојама и величинама апликације.

Промена боје кроз KeyPath

Боје испуне и контуре се могу мењати у runtime-у кроз KeyPath — стринг путању до елемента анимације. На пример, за замену боје иконе корпе са црвене на плаву, довољно је пронаћи њен KeyPath и применити нову вредност. То елиминише потребу за чувањем више верзија исте анимације за различите шеме боја.

Управљање брзином и напретком

Свака Lottie анимација се може контролисати по брзини (animationSpeed), напретку (setProgress) и опсегу кадрова (play(fromFrame:toFrame:)). Режим напретка омогућава синхронизацију анимације са гестом скроловања: што је екран више померен, то је анимација напреднија — то је популарна техника за onboarding и паралакс ефекте.