Lottie — ano ito, vector animation sa mga mobile app

Ano ang Lottie?

Lottie — isang cross-platform library para sa pag-play ng vector animation, na binuo sa Airbnb noong 2015. Nilulutas nito ang problema ng mabibigat na video file at raster sprite sheet: gumagawa ang taga-disenyo ng animation sa After Effects, ini-export sa pamamagitan ng Bodymovin patungong JSON, at isinasama ng developer ang file na ito sa mobile app. Ni-re-render ng Lottie ang animation nang programmatically sa pamamagitan ng Canvas, Core Animation o Skia, depende sa platform.

Ang pangunahing bentahe ng Lottie — ang vector animation ay nag-scale nang walang pagkawala ng kalidad sa anumang screen: mula sa Apple Watch hanggang sa 4K TV. Ang laki ng JSON animation file ay karaniwang 5–50 KB, na sampu-sampung beses na mas maliit kaysa sa katumbas na video file. Ayon sa Airbnb Engineering (2025), sinusuportahan ng Lottie ang higit sa 80% ng mga kakayahan ng Adobe After Effects, kabilang ang mga mask, effect, curve at expression.

Bodymovin — ay isang plugin para sa After Effects (libre, GitHub) na nagse-serialize ng komposisyon sa JSON format na naiintindihan ng Lottie runtime. Ang mga bersyon ng After Effects CC 2018 at mas bago ay sinusuportahan. Para sa mga kumplikadong animation na may maraming keyframe, inirerekomendang gamitin ang dotLottie — isang format batay sa Lottie JSON, ngunit naka-compress at naka-pack sa isang file.

Arkitektura ng Lottie: paano gumagana ang rendering

Lottie ay gumagamit ng layered rendering architecture na umaangkop sa mga kakayahan ng platform. Sa Android, ang animation ay iginuhit sa pamamagitan ng Canvas API — sariling renderer ng Lottie (LottieDrawable) na hindi gumagamit ng mga system animation. Sa iOS, umaasa ang Lottie sa Core Animation Layers, na nagbibigay ng mataas na pagganap at 60 FPS. Sa Flutter, gumagamit ang Lottie ng Skia Canvas sa pamamagitan ng CustomPainter.

Ang rendering ay dumadaan sa tatlong yugto: pag-parse ng JSON — pagsusuri ng animation sa LottieComposition (lahat ng layer, hugis, keyframe); interpolation — pagkalkula ng mga halaga sa pagitan ng mga keyframe na isinasaalang-alang ang easing curves; pag-drawing — pag-render ng kasalukuyang frame sa Canvas o sa pamamagitan ng Core Animation. Sinusuportahan ng Lottie ang hardware acceleration: sa Android — acceleration sa pamamagitan ng Canvas na may Hardware Accelerator, sa iOS — CALayer na may built-in na GPU acceleration ng Core Animation.

Paggamit ng Lottie sa Android (Kotlin)

Sa Android, ang LottieAnimationView ay nagpapalawak ng AppCompatImageView at inaako ang buong cycle ng pag-load at rendering. Ang JSON file ay inilalagay sa folder na res/raw o assets. Sinusuportahan ng LottieAnimationView ang pamamahala ng pag-play — play, pause, resume, setFrame, setProgress, repeat, speed — at pakikinig sa pamamagitan ng AnimatorUpdateListener at AnimatorListener.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieListener

// Programmatic na configuration ng LottieAnimationView
val lottieView = LottieAnimationView(context).apply {
    setAnimation(R.raw.celebrate_animation)
    repeatCount = ValueAnimator.INFINITE
    speed = 1.5f
    addAnimatorUpdateListener { animator ->
        val progress = animator.animatedValue as Float
        progressBar.progress = (progress * 100).toInt()
    }
    playAnimation()
}

// Pag-load mula sa assets at caching
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — custom na pag-drawing nang walang View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Pinakamahusay na kasanayan sa Android: gamitin ang setCacheStrategy(CacheStrategy.Strong) para sa mga madalas na inuulit na animation — ang komposisyon ay naka-cache sa memorya, at ang bawat bagong instance ay hindi nagpa-parse ng JSON mula sa simula. Para sa mga listahan (RecyclerView) gamitin ang LottieAnimationView na may enableMergePathsForKitKatAndAbove(true) at disableExtraScaleModeForOlderWorkarounds() para sa pag-optimize ng rendering. Para sa mga animation na may transparent na background, itakda ang android:layerType="hardware" para sa GPU acceleration.

Paggamit ng Lottie sa iOS (Swift)

Sa iOS, ang AnimationView — pangunahing klase ng Lottie para sa UIKit at SwiftUI. Ito ay kumokonekta sa pamamagitan ng Swift Package Manager o CocoaPods. Ang mga JSON file ay idinaragdag sa bundle ng proyekto. Awtomatikong tinutukoy ng AnimationView ang scale (lohikal na densidad ng screen) at ginagamit ang Core Animation para sa pag-render ng mga layer sa 60 FPS.

import Lottie

// UIKit: AnimationView na may manu-manong kontrol
let animationView = AnimationView(name: "confetti")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.animationSpeed = 1.5
animationView.play(fromProgress: 0, toProgress: 0.5) { finished in
    print("Natapos ang segment ng animation: \(finished)")
}
view.addSubview(animationView)

// UIKit: animation na may progreso (para sa pag-binding sa kaganapan)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView bilang UIViewRepresentable
import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {
    let name: String
    var loopMode: LottieLoopMode = .loop
    @Binding var progress: CGFloat

    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView(name: name)
        view.contentMode = .scaleAspectFit
        view.loopMode = loopMode
        return view
    }

    func updateUIView(_ uiView: AnimationView, context: Context) {
        uiView.currentProgress = progress
    }
}

// Paggamit sa SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Pinakamahusay na kasanayan sa iOS: para sa mga animation na magsisimula kaagad pagkatapos mag-load, gamitin ang animationView.play(fromProgress: 0, toProgress: 1) na may loopMode = .playOnce para sa isang beses na accent effect. Para sa Lottie sa UITableView/UICollectionView gamitin ang AnimationView na may naka-cache na animation file sa pamamagitan ng LottieAnimation.cached. Ang pag-render ng malaking bilang ng mga layer (50+) ay maaaring magdulot ng pagbaba ng FPS — sa mga ganitong kaso, i-activate ang renderingEngine = .mainThread (default) o .coreAnimation para sa macOS.

Lottie vs video: paghahambing ng mga format ng animation

Lottie ay pangunahing naiiba sa mga video file: hindi ito nag-iimbak ng mga pixel, ngunit naglalarawan ng mga vector shape, kanilang mga pagbabago at curve ng pagbabago sa paglipas ng panahon. Ang video (MP4, WebM) — ay isang pagkakasunod-sunod ng mga raster frame na may takdang resolusyon. Ang pagkakaiba ay makikita sa laki ng file, kalidad ng pag-scale, interaktibidad at pagganap.

Kailan pumili ng Lottie: mga icon ng pag-load, like/reaction animation, onboard screen, accent micro-animation ng mga button. Para sa mga kumplikadong eksena na may 3D effect, makatotohanang ilaw o photorealism na karakter, ang video ay nananatiling mas praktikal na pagpipilian. Ang Lottie ay hindi dinisenyo para sa pag-play ng mahabang eksena (higit sa 10 segundo) — ang optimal na tagal ng isang animation ay 2–5 segundo.

Pag-optimize ng pagganap ng Lottie

Pagganap ng Lottie ay depende sa bilang ng mga layer, pagiging kumplikado ng mga mask at effect, at sa renderer. Upang mapanatili ang 60 FPS sa mid-range na device, sundin ang mga rekomendasyon: limitahan ang bilang ng mga layer sa 30–40 bawat eksena, iwasan ang magkakapatong na nested pre-composition, gamitin ang dotLottie para sa mga kumplikadong animation.

// Pag-optimize ng Lottie para sa RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Caching ng komposisyon sa memorya
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool ng LottieAnimationView para sa muling paggamit
class LottiePool {
    private val pool = LinkedList<LottieAnimationView>()

    fun acquire(context: Context): LottieAnimationView {
        return pool.poll() ?: LottieAnimationView(context)
    }

    fun release(view: LottieAnimationView) {
        view.pauseAnimation()
        view.cancelAnimation()
        pool.add(view)
    }
}

// Pag-disable ng mga hindi kinakailangang feature
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Paglilimita sa bilang ng mga frame

Karagdagang pag-optimize: i-activate ang enableMergePathsForKitKatAndAbove(true) para sa mga device na may Android 4.4+ — pinagsasama nito ang magkakapatong na contour sa isang landas, na binabawasan ang bilang ng mga draw calls. Gamitin ang dotLottie sa halip na JSON — pinipiga ng binary format ang animation ng 50–80% sa pamamagitan ng protobuf serialization, na nagpapabilis ng pag-parse. Para sa mga animation sa RecyclerView, itakda ang repeatCount = 0 (isang beses na pag-play) at ihinto ang animation habang nag-scroll sa pamamagitan ng recyclerView.addOnScrollListener. Ayon sa Airbnb Engineering Blog (2025), binabawasan ng mga hakbang na ito ang CPU load ng hanggang 40%.