Lottie — bu nima, mobil ilovalarda vektor animatsiyasi

Lottie nima?

Lottie — 2015 yilda Airbnb da ishlab chiqilgan vektor animatsiyasini ijro etish uchun ko‘p platformali kutubxona. U og‘ir video fayllar va rastr spritelar muammosini hal qiladi: dizayner After Effects da animatsiya yaratadi, Bodymovin orqali JSON ga eksport qiladi va dasturchi bu faylni mobil ilovaga joylashtiradi. Lottie animatsiyani platformaga qarab Canvas, Core Animation yoki Skia orqali dasturiy ravishda renderlaydi.

Lottie ning asosiy afzalligi — vektor animatsiyasi Apple Watch soatlaridan 4K televizorlargacha har qanday ekranda sifat yo‘qotilmasdan masshtablanadi. JSON animatsiya faylining hajmi odatda 5–50 KB ni tashkil qiladi, bu ekvivalent video fayldan o'nlab marta kichikdir. Airbnb Engineering (2025) ma'lumotlariga ko‘ra, Lottie Adobe After Effects imkoniyatlarining 80% dan ortig‘ini, jumladan maskalar, effektlar, egri chiziqlar va ifodalarni qo‘llab-quvvatlaydi.

Bodymovin — After Effects uchun (bepul, GitHub) Lottie ish vaqti uchun tushunarli JSON formatida kompozitsiyani seriyalashtiruvchi plagin. After Effects CC 2018 va undan yangi versiyalari qo‘llab-quvvatlanadi. Ko‘p sonli kalit kadrlarga ega murakkab animatsiyalar uchun Lottie JSON ga asoslangan, lekin siqilgan va bitta faylga paketlangan dotLottie formatidan foydalanish tavsiya etiladi.

Lottie arxitekturasi: render qanday ishlaydi

Lottie platforma imkoniyatlariga moslashuvchi qatlamli render arxitekturasidan foydalanadi. Android da animatsiya Canvas API orqali chiziladi — Lottie ning o‘z rendereri (LottieDrawable) tizim animatsiyalaridan foydalanmaydi. iOS da Lottie Core Animation Layers ga tayanadi, bu yuqori unumdorlik va 60 FPS ni ta'minlaydi. Flutter da Lottie CustomPainter orqali Skia Canvas dan foydalanadi.

Render uch bosqichdan o‘tadi: JSON pars qilish — animatsiyani LottieComposition da tahlil qilish (barcha qatlamlar, shakllar, kalit kadrlar); interpolyatsiya — easing egri chiziqlarini hisobga olgan holda kalit kadrlar orasidagi oraliq qiymatlarni hisoblash; chizish — joriy kadrni Canvas yoki Core Animation orqali renderlash. Lottie apparat tezlatishini qo‘llab-quvvatlaydi: Android da — Hardware Accelerator bilan Canvas orqali tezlashtirish, iOS da — o‘rnatilgan GPU tezlatish bilan CALayer Core Animation.

Android-da Lottie dan foydalanish (Kotlin)

Android da LottieAnimationView AppCompatImageView ni kengaytiradi va yuklash hamda renderlashning butun siklini o‘z zimmasiga oladi. JSON fayli res/raw yoki assets papkasiga joylashtiriladi. LottieAnimationView ijro boshqaruvini — play, pause, resume, setFrame, setProgress, repeat, speed — va AnimatorUpdateListener hamda AnimatorListener orqali tinglashni qo‘llab-quvvatlaydi.

<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 ni dasturiy sozlash
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 dan yuklash va keshlash
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — Viewsiz maxsus chizish
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Android uchun eng yaxshi amaliyotlar: tez-tez takrorlanadigan animatsiyalar uchun setCacheStrategy(CacheStrategy.Strong) dan foydalaning — kompozitsiya xotirada keshlanadi va har bir yangi nusxa JSON ni qayta pars qilmaydi. Ro‘yxatlar (RecyclerView) uchun LottieAnimationView ni enableMergePathsForKitKatAndAbove(true) va disableExtraScaleModeForOlderWorkarounds() bilan render optimallashtirish uchun foydalaning. Shaffof fonli animatsiyalar uchun GPU tezlatishi uchun android:layerType="hardware" ni o‘rnating.

iOS-da Lottie dan foydalanish (Swift)

iOS da AnimationView — UIKit va SwiftUI uchun Lottie ning asosiy sinfi. Swift Package Manager yoki CocoaPods orqali ulanadi. JSON fayllari loyihaning bundle iga qo‘shiladi. AnimationView avtomatik ravishda scale (ekranning mantiqiy zichligi) ni aniqlaydi va 60 FPS bilan qatlamlarni renderlash uchun Core Animation dan foydalanadi.

import Lottie

// UIKit: Qo‘lda boshqariladigan 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("Animatsiya segmenti tugadi: \(finished)")
}
view.addSubview(animationView)

// UIKit: jarayon bilan animatsiya (hodisaga bog‘lash uchun)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: UIViewRepresentable sifatida LottieView
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 da foydalanish
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

iOS uchun eng yaxshi amaliyotlar: yuklanishdan so‘ng darhol ishga tushadigan animatsiyalar uchun bir martalik urg‘u effektlari uchun animationView.play(fromProgress: 0, toProgress: 1) ni loopMode = .playOnce bilan foydalaning. UITableView/UICollectionView da Lottie uchun LottieAnimation.cached orqali keshlangan animatsiya fayli bilan AnimationView dan foydalaning. Ko‘p sonli qatlamlarni (50+) renderlash FPS ning tushishiga olib kelishi mumkin — bunday hollarda renderingEngine = .mainThread (standart) yoki macOS uchun .coreAnimation ni yoqing.

Lottie vs video: animatsiya formatlarini taqqoslash

Lottie video fayllardan tubdan farq qiladi: u piksellarni saqlamaydi, balki vektor shakllarini, ularning transformatsiyalarini va vaqt bo‘yicha o‘zgarish egri chiziqlarini tavsiflaydi. Video (MP4, WebM) — sobit o‘lchamdagi rastr kadrlar ketma-ketligidir. Farq fayl hajmi, masshtablash sifati, interaktivlik va unumdorlikda namoyon bo‘ladi.

Qachon Lottie ni tanlash kerak: yuklash ikonkalari, like/reaksiya animatsiyalari, onboard ekrani, tugmalarning urg‘u mikroanimatsiyalari. 3D effektlari, realistik yoritish yoki fotorealistik personajlar bilan murakkab sahnalar uchun video amaliyroq tanlov bo‘lib qoladi. Lottie uzoq sahnalarni (10 soniyadan ortiq) ijro etish uchun mo‘ljallanmagan — bitta animatsiyaning optimal davomiyligi 2–5 soniya.

Lottie unumdorligini optimallashtirish

Lottie unumdorligi qatlamlar soniga, maskalar va effektlarning murakkabligiga hamda rendererga bog‘liq. O‘rta segment qurilmalarida 60 FPS ni saqlash uchun tavsiyalarga amal qiling: qatlamlar sonini sahna uchun 30–40 bilan cheklang, bir-biriga o‘tib ketuvchi ichma-ich pre-kompozitsiyalardan saqlaning, murakkab animatsiyalar uchun dotLottie dan foydalaning.

// RecyclerView uchun Lottie optimallashtirish
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Kompozitsiyani xotirada keshlash
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Qayta foydalanish uchun LottieAnimationView havzasi
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)
    }
}

// Keraksiz imkoniyatlarni o‘chirish
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Kadrlar sonini cheklash

Qo‘shimcha optimallashtirishlar: Android 4.4+ qurilmalari uchun enableMergePathsForKitKatAndAbove(true) ni yoqing — bu bir-biriga o‘tib ketuvchi konturlarni bitta yo‘lga birlashtirib, draw calls sonini kamaytiradi. JSON o‘rniga dotLottie dan foydalaning — ikkilik format protobuf-seriyalash hisobiga animatsiyani 50–80% siqadi, bu esa pars qilish vaqtini qisqartiradi. RecyclerView dagi animatsiyalar uchun repeatCount = 0 (bir martalik ijro) ni o‘rnating va recyclerView.addOnScrollListener orqali skroll paytida animatsiyani to‘xtating. Airbnb Engineering Blog (2025) ma'lumotlariga ko‘ra, bu choralar CPU yukini 40% gacha kamaytiradi.