Lottie: ano ito, mga animation at paano ito gumagana sa mga mobile platform

Ano ang Lottie at paano ito gumagana

Lottie — ay isang open-source library na ginawa ng Airbnb noong 2015 para sa pag-render ng vector animation sa real-time. Ang developer ay gumagawa ng animation sa Adobe After Effects, iniluluwas ito sa pamamagitan ng Bodymovin plugin sa JSON, at pinapatugtog ng Lottie ang JSON na ito sa target device, na nag-interpret ng mga layer, hugis, transparency at animation curves.

Hindi tulad ng mga video file o GIF, ang Lottie ay hindi nakadepende sa resolution ng screen — ang animation ay nire-render nang vector at mukhang pareho sa mga device na may anumang DPI. Ang laki ng JSON animation ay average na 5-10 beses na mas maliit kaysa sa katumbas na GIF o video, na kritikal para sa mobile apps na may limitadong data.

Ayon sa Airbnb Engineering, ang pagpapatupad ng Lottie ay nagbawas ng laki ng mga animation sa app ng 80% kumpara sa Precomposed video, habang ang frame rate ay nanatiling 60 FPS sa lahat ng supported na device. Ngayon, ang Lottie ay suportado sa iOS, Android, Flutter, React Native, Web (HTML Canvas at SVG) at desktop platforms.

Ang performance ng Lottie ay tinitiyak ng native rendering: sa iOS gamit ang Core Animation na may CALayer, sa Android — sariling Canvas renderer sa C++ sa pamamagitan ng JNI. Ito ay nagpapahintulot sa pag-play ng kumplikadong animation na may dose-dosenang mga layer nang walang frame loss kahit sa mid-range devices. Hindi tulad ng WebView solutions (GIF, APNG, video), ang Lottie ay hindi gumagawa ng hiwalay na proseso para sa rendering at hindi kumokonsumo ng karagdagang memory para sa pag-decode ng frames.

Gamitin ang Lottie para sa loading indicators, icons na may micro-interactions, onboarding screens at holiday promotional animation kung saan mahalaga ang kinis at maliit na sukat.

Ang Lottie ecosystem ay may kasamang opisyal na players para sa walong platforms, LottieFiles editor para sa preview sa browser at marketplace na may libu-libong ready-made animation. Maaaring i-download ng developer ang JSON, isama ito sa proyekto at ayusin ang mga kulay at bilis ayon sa design system nang hindi binubuksan ang After Effects. Ang LottieFiles ay nagbibigay din ng SDK para sa accelerated integration na may kakayahang mag-load ng animation sa pamamagitan ng AIR link, na nagpapahintulot sa pag-update ng mga animation sa mga device nang hindi naglalathala ng bagong bersyon ng app sa App Store o Google Play.

JSON format ng Lottie at Bodymovin

Ang JSON schema ng Lottie — ay isang bukas na pamantayan para sa paglalarawan ng vector animation na binubuo ng tatlong antas: komposisyon (composition), layers at shapes. Ang komposisyon ay naglalaman ng metadata: laki ng canvas, frame rate at tagal.

Istruktura ng JSON

Ang root JSON object ay naglalaman ng field na layers — array ng animation layers. Ang bawat layer ay maaaring hugis (Shape Layer), larawan (Image Layer), teksto (Text Layer) o pre-composition (PreComp Layer). Para sa bawat layer, ang transform properties ay tinutukoy: posisyon, scale, rotation at transparency na naka-link sa keyframes.

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

Ang mga keyframe ay tinutukoy gamit ang arrays ng timestamps, values at Bezier curves para sa interpolation. Awtomatikong kino-convert ng Bodymovin ang After Effects curves sa format na naiintindihan ng Lottie, pinapanatili ang timing at ease functions na may frame accuracy.

Bodymovin — export plugin

Bodymovin — ay isang extension para sa Adobe After Effects na nagluluwas ng komposisyon sa Lottie JSON file. Ang plugin ay sumusuporta sa karamihan ng mga kakayahan ng After Effects: shapes, masks, effects, text layers at tracking. Ang mga limitasyon ay nauukol sa 3D layers at ilang plugins — hindi ito iniluluwas at nangangailangan ng pagpapasimple ng animation sa 2D.

Integrasyon ng Lottie sa iOS

Sa iOS ang Lottie ay isinasama sa pamamagitan ng Swift Package Manager, CocoaPods o Carthage. Ang pangunahing klase — LottieView para sa SwiftUI at LottieAnimationView para sa UIKit. Ang lottie-ios package ay may kasamang suporta para sa mga animation mula sa bundle, network at Data objects.

LottieView sa SwiftUI

LottieView — ay isang View component para sa SwiftUI na tumatanggap ng JSON file name mula sa bundle o URL para sa pag-load mula sa network. Ang animation ay awtomatikong pinapatugtog gamit ang tinukoy na bilis at bilang ng pag-uulit.

import Lottie

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

Para sa UIKit ginagamit ang LottieAnimationView na may configuration sa pamamagitan ng Interface Builder o programmatically. Ang View ay sumusuporta sa lahat ng estado ng animation: play, pause, stop, pati na rin ang progress bar para sa pag-load ng data. Ang LottieAnimationView ay maaaring i-embed sa UITableViewCell o UICollectionViewCell para sa animated icons sa mga listahan — sa pag-scroll, ang cell animation ay naka-pause, at sa paglitaw sa screen ay nagpapatuloy, na nakakatipid ng CPU at GPU resources.

Ang modernong iOS development ay aktibong gumagamit ng Lottie kasama ng SwiftUI para sa paggawa ng animated onboarding screens at interactive elements: sa pag-scroll ng screen, ang progress ng animation ay naka-sync sa scroll position sa pamamagitan ng ScrollViewReader. Ito ay lumilikha ng parallax effect kung saan ang animation ay patuloy na sumusunod sa galaw ng daliri ng user, pinapataas ang engagement nang hindi gumagamit ng mabibigat na video files.

Pamamahala ng Pag-play

Ang Lottie player sa iOS ay nagbibigay ng API para sa pag-play mula sa specific frame hanggang specific frame, pagbabago ng fill/stroke color sa pamamagitan ng KeyPaths at pakikinig sa mga event sa pamamagitan ng LottieAnimationDelegate. Maaari mong i-pause ang animation sa pag-scroll at ipagpatuloy sa paghinto para sa performance optimization.

Integrasyon ng Lottie sa Android

Sa Android ang Lottie ay kumokonekta sa pamamagitan ng Gradle dependency com.airbnb.android:lottie. Ang pangunahing component — LottieAnimationView, na maaaring ilagay sa XML layout bilang ordinaryong View at i-configure sa pamamagitan ng attributes o programmatically.

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

Sa XML layout ang LottieAnimationView ay naka-configure sa pamamagitan ng attributes: lottie_rawRes (reference sa JSON sa res/raw), lottie_autoPlay, lottie_loop. Ang pag-load mula sa network ay suportado sa pamamagitan ng lottie_url o programmatically sa pamamagitan ng setAnimationFromUrl. Ang Android version ng Lottie ay gumagamit ng sariling Canvas renderer, independiyente sa hardware acceleration.

Pag-load mula sa RawRes at Network

Para sa static animations, ang JSON ay inilalagay sa res/raw at ni-reference sa pamamagitan ng RawRes. Para sa dynamic animations, ang Lottie ay naglo-load ng JSON mula sa URL o Data object na may progress callback na nagpapakita ng loading percentage. Ang Lottie cache ay awtomatikong nagse-save ng loaded animations sa memory upang maiwasan ang re-loading sa paulit-ulit na rendering.

Ang Lottie para sa Android ay sumusuporta sa animation sa RecyclerView sa pamamagitan ng LottieAnimationView na direktang naka-embed sa list element. Para sa performance optimization, inirerekomenda ang paggamit ng setAnimation na may deferred loading at pag-disable ng animation para sa hindi nakikitang elements sa screen sa pamamagitan ng RecyclerView.OnChildAttachStateChangeListener callback. Ito ay pumipigil sa FPS drop sa pag-scroll ng mahabang listahan na may animated icons.

Pag-customize at Pamamahala ng Lottie Animation

Lottie ay nagbibigay ng malakas na API para sa pag-customize ng ready-made animations nang hindi binabago ang orihinal na After Effects file. Ito ay nagpapahintulot sa pag-adapt ng isang animation sa iba't ibang tema, kulay at laki ng app.

Pagbabago ng Kulay sa pamamagitan ng KeyPath

Ang fill at stroke na mga kulay ay maaaring baguhin sa runtime sa pamamagitan ng KeyPath — string path sa animation element. Halimbawa, para palitan ang kulay ng cart icon mula pula tungong asul, sapat na hanapin ang KeyPath nito at mag-apply ng bagong value. Tinatanggal nito ang pangangailangan na mag-imbak ng maraming bersyon ng parehong animation para sa iba't ibang color scheme.

Pamamahala ng Bilis at Progress

Bawat Lottie animation ay maaaring kontrolin ayon sa bilis (animationSpeed), progress (setProgress) at frame range (play(fromFrame:toFrame:)). Ang progress mode ay nagpapahintulot sa pag-sync ng animation sa scroll gesture: kung gaano kalayo ang na-scroll na screen, ganoon kalayo ang animation — ito ay popular na technique para sa onboarding at parallax effects.