Lottie — шта је то, векторска анимација у мобилним апликацијама

Шта је Lottie?

Lottie — вишеплатформска библиотека за репродукцију векторске анимације, развијена у Airbnb-ју 2015. године. Решава проблем тешких видео датотека и растерских спрајт-листова: дизајнер креира анимацију у After Effects-у, извози је преко Bodymovin-а у JSON, а програмер уграђује ову датотеку у мобилну апликацију. Lottie рендерује анимацију програмски преко Canvas-а, Core Animation или Skia, у зависности од платформе.

Главна предност Lottie — векторска анимација се скалира без губитка квалитета на било ком екрану: од Apple Watch сатова до 4K телевизора. Величина JSON датотеке анимације обично износи 5–50 KB, што је десетинама пута мање од еквивалентне видео датотеке. Према Airbnb Engineering (2025), Lottie подржава преко 80% могућности Adobe After Effects-а, укључујући маске, ефекте, криве и изразе.

Bodymovin — је додатак за After Effects (бесплатан, GitHub) који серијализује композицију у JSON формат разумљив Lottie runtime-у. Подржане су верзије After Effects CC 2018 и новије. За сложене анимације са великим бројем кључних кадрова препоручује се коришћење dotLottie — формата заснованог на Lottie JSON, али компресованог и упакованог у једну датотеку.

Архитектура Lottie: како функционише рендеровање

Lottie користи слојевиту архитектуру рендеровања која се прилагођава могућностима платформе. На Android-у анимација се црта преко Canvas API-ја — сопствени Lottie рендерер (LottieDrawable) који не користи системске анимације. На iOS-у Lottie се ослања на Core Animation Layers, што пружа високе перформансе и 60 FPS. На Flutter-у Lottie користи Skia Canvas преко CustomPainter-а.

Рендеровање пролази кроз три фазе: парсирање JSON — анализа анимације у LottieComposition (сви слојеви, облици, кључни кадрови); интерполација — израчунавање међувредности између кључних кадрова узимајући у обзир easing криве; цртање — рендеровање тренутног кадра на Canvas-у или преко Core Animation. Lottie подржава хардверско убрзање: на Android-у — убрзање преко Canvas-а са Hardware Accelerator-ом, на iOS-у — CALayer са уграђеним GPU убрзањем Core Animation.

Коришћење Lottie на Android-у (Kotlin)

На Android-у LottieAnimationView проширује AppCompatImageView и преузима цео циклус учитавања и рендеровања. JSON датотека се поставља у фасциклу res/raw или assets. LottieAnimationView подржава управљање репродукцијом — play, pause, resume, setFrame, setProgress, repeat, speed — и ослушкивање преко AnimatorUpdateListener-а и 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

// Програмско подешавање 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()
}

// Учитавање из assets и кеширање
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — прилагођено цртање без View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Најбоље праксе за Android: користите setCacheStrategy(CacheStrategy.Strong) за често понављане анимације — композиција се кешира у меморији, а свака нова инстанца не парсира JSON поново. За листе (RecyclerView) користите LottieAnimationView са enableMergePathsForKitKatAndAbove(true) и disableExtraScaleModeForOlderWorkarounds() за оптимизацију рендеровања. За анимације са провидном позадином поставите android:layerType="hardware" за GPU убрзање.

Коришћење Lottie на iOS-у (Swift)

На iOS-у AnimationView — главна Lottie класа за UIKit и SwiftUI. Повезује се преко Swift Package Manager-а или CocoaPods-а. JSON датотеке се додају у bundle пројекта. AnimationView аутоматски одређује scale (логичку густину екрана) и користи Core Animation за рендеровање слојева са 60 FPS.

import Lottie

// UIKit: AnimationView са ручним управљањем
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("Сегмент анимације завршен: \(finished)")
}
view.addSubview(animationView)

// UIKit: анимација са напретком (за везивање за догађај)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView као 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
    }
}

// Коришћење у SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Најбоље праксе за iOS: за анимације које се покрећу одмах након учитавања, користите animationView.play(fromProgress: 0, toProgress: 1) са loopMode = .playOnce за једнократне акцентне ефекте. За Lottie у UITableView/UICollectionView користите AnimationView са кешираном датотеком анимације преко LottieAnimation.cached. Рендеровање великог броја слојева (50+) може изазвати пад FPS-а — у таквим случајевима укључите renderingEngine = .mainThread (подразумевано) или .coreAnimation за macOS.

Lottie vs видео: поређење формата анимације

Lottie се суштински разликује од видео датотека: не чува пикселе, већ описује векторске облике, њихове трансформације и криве промене током времена. Видео (MP4, WebM) — је секвенца растерских кадрова фиксне резолуције. Разлика се манифестује у величини датотеке, квалитету скалирања, интерактивности и перформансама.

Када одабрати Lottie: иконице за учитавање, лајкови/анимације реакција, уводни екран, акцентне микроанимације дугмади. За сложене сцене са 3D ефектима, реалистичним осветљењем или фотореалистичним ликовима, видео остаје практичнији избор. Lottie није намењен за репродукцију дугих сцена (више од 10 секунди) — оптимално трајање једне анимације је 2–5 секунди.

Оптимизација перформанси Lottie

Перформансе Lottie зависе од броја слојева, сложености маски и ефеката, као и од рендерера. За одржавање 60 FPS на уређајима средњег сегмента, пратите препоруке: ограничите број слојева на 30–40 по сцени, избегавајте преклапајуће угнежђене pre-compositions, користите dotLottie за сложене анимације.

// Оптимизација Lottie за RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Кеширање композиције у меморији
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Пул LottieAnimationView за поновно коришћење
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)
    }
}

// Искључивање непотребних могућности
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Ограничење броја кадрова

Додатне оптимизације: укључите enableMergePathsForKitKatAndAbove(true) за уређаје са Android 4.4+ — ово спаја контуре које се преклапају у једну путању, смањујући број draw calls. Користите dotLottie уместо JSON — бинарни формат компримује анимацију за 50–80% захваљујући protobuf серијализацији, што скраћује време парсирања. За анимације у RecyclerView поставите repeatCount = 0 (једнократна репродукција) и зауставите анимацију приликом скроловања преко recyclerView.addOnScrollListener. Према Airbnb Engineering Blog (2025), ове мере смањују оптерећење CPU-а до 40%.