Lottie — bu nədir, mobil tətbiqlərdə vektor animasiyası

Lottie nədir?

Lottie — 2015-ci ildə Airbnb-də hazırlanmış, vektor animasiyasını oynatmaq üçün çarpaz platforma kitabxanasıdır. Ağır video faylları və rastr sprite cədvəlləri problemini həll edir: dizayner After Effects-də animasiya yaradır, Bodymovin vasitəsilə JSON-a ixrac edir və tərtibatçı bu faylı mobil tətbiqə yerləşdirir. Lottie animasiyanı platformadan asılı olaraq Canvas, Core Animation və ya Skia vasitəsilə proqramlı şəkildə render edir.

Lottie-nin əsas üstünlüyü — vektor animasiyası Apple Watch saatlarından 4K televizorlara qədər istənilən ekranda keyfiyyət itkisi olmadan miqyaslanır. JSON animasiya faylının ölçüsü adətən 5–50 KB təşkil edir ki, bu da ekvivalent video fayldan dəfələrlə kiçikdir. Airbnb Engineering (2025) məlumatına görə, Lottie Adobe After Effects imkanlarının 80%-dən çoxunu, o cümlədən maskalar, effektlər, əyrilər və ifadələri dəstəkləyir.

Bodymovin — After Effects üçün (pulsuz, GitHub) Lottie iş vaxtı üçün başa düşülən JSON formatında kompozisiyanı seriallaşdıran plagin. After Effects CC 2018 və daha yeni versiyaları dəstəklənir. Çox sayda əsas kadrları olan mürəkkəb animasiyalar üçün Lottie JSON-a əsaslanan, lakin sıxılmış və bir fayla paketlənmiş dotLottie formatından istifadə etmək tövsiyə olunur.

Lottie arxitekturası: render necə işləyir

Lottie platformanın imkanlarına uyğunlaşan laylı render arxitekturasından istifadə edir. Android-də animasiya Canvas API vasitəsilə çəkilir — Lottie-nin öz rendereri (LottieDrawable) sistem animasiyalarından istifadə etmir. iOS-də Lottie Core Animation Layers-ə əsaslanır, bu da yüksək performans və 60 FPS təmin edir. Flutter-də Lottie CustomPainter vasitəsilə Skia Canvas-dan istifadə edir.

Render üç mərhələdən keçir: JSON pars etmə — animasiyanın LottieComposition-da təhlili (bütün laylar, formalar, əsas kadrlar); interpolyasiya — easing əyriləri nəzərə alınmaqla əsas kadrlar arasında aralıq dəyərlərin hesablanması; çəkmə — cari kadrın Canvas və ya Core Animation vasitəsilə render edilməsi. Lottie aparat sürətləndirilməsini dəstəkləyir: Android-də — Hardware Accelerator ilə Canvas vasitəsilə sürətləndirmə, iOS-də — quraşdırılmış GPU sürətləndirməsi ilə CALayer Core Animation.

Android-də Lottie istifadəsi (Kotlin)

Android-də LottieAnimationView AppCompatImageView-i genişləndirir və yükləmə və renderin bütün dövrünü öz üzərinə götürür. JSON faylı res/raw və ya assets qovluğuna yerləşdirilir. LottieAnimationView oynatma idarəetməsini — play, pause, resume, setFrame, setProgress, repeat, speed — və AnimatorUpdateListener və AnimatorListener vasitəsilə dinləməni dəstəkləyir.

<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-in proqram təyin edilməsi
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-dən yükləmə və keşləmə
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — View olmadan fərdi çəkmə
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Android üçün ən yaxşı təcrübələr: tez-tez təkrarlanan animasiyalar üçün setCacheStrategy(CacheStrategy.Strong) istifadə edin — kompozisiya yaddaşda keşlənir və hər yeni nümunə JSON-u yenidən pars etmir. Siyahılar (RecyclerView) üçün LottieAnimationView-dən enableMergePathsForKitKatAndAbove(true) və disableExtraScaleModeForOlderWorkarounds() ilə render optimallaşdırması üçün istifadə edin. Şəffaf fonlu animasiyalar üçün GPU sürətləndirilməsi üçün android:layerType="hardware" təyin edin.

iOS-də Lottie istifadəsi (Swift)

iOS-də AnimationView — UIKit və SwiftUI üçün Lottie-nin əsas sinfidir. Swift Package Manager və ya CocoaPods vasitəsilə qoşulur. JSON faylları layihənin bundle-ına əlavə edilir. AnimationView avtomatik olaraq scale (ekranın məntiqi sıxlığı) təyin edir və 60 FPS ilə layların render edilməsi üçün Core Animation-dan istifadə edir.

import Lottie

// UIKit: Əllə idarə olunan 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("Animasiya seqmenti bitdi: \(finished)")
}
view.addSubview(animationView)

// UIKit: gedişatla animasiya (hadisəyə bağlamaq üçün)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: UIViewRepresentable kimi 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-də istifadə
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

iOS üçün ən yaxşı təcrübələr: yüklənmədən dərhal sonra işə düşən animasiyalar üçün birdəfəlik vurğu effektləri üçün animationView.play(fromProgress: 0, toProgress: 1) loopMode = .playOnce ilə istifadə edin. UITableView/UICollectionView-də Lottie üçün LottieAnimation.cached vasitəsilə keşlənmiş animasiya faylı ilə AnimationView istifadə edin. Çox sayda layın (50+) render edilməsi FPS-in düşməsinə səbəb ola bilər — belə hallarda renderingEngine = .mainThread (standart) və ya macOS üçün .coreAnimation daxil edin.

Lottie vs video: animasiya formatlarının müqayisəsi

Lottie video fayllarından prinsipial olaraq fərqlənir: o piksel saxlamır, vektor fiqurlarını, onların transformasiyalarını və zamanla dəyişmə əyrilərini təsvir edir. Video (MP4, WebM) — sabit təsvir ölçülü rastr kadrlar ardıcıllığıdır. Fərq fayl ölçüsü, miqyaslama keyfiyyəti, interaktivlik və performansda özünü göstərir.

Nə vaxt Lottie seçmək: yükləmə ikonları, bəyənmə/reaksiya animasiyaları, onboard ekranı, düymələrin vurğu mikroanimasiyaları. 3D effektləri, realist işıqlandırma və ya fotorealist personajları olan mürəkkəb səhnələr üçün video daha praktik seçim olaraq qalır. Lottie uzun səhnələrin (10 saniyədən çox) oynadılması üçün nəzərdə tutulmayıb — bir animasiyanın optimal müddəti 2–5 saniyədir.

Lottie performansının optimallaşdırılması

Lottie performansı layların sayından, maskaların və effektlərin mürəkkəbliyindən və rendererdən asılıdır. Orta seqment cihazlarında 60 FPS saxlamaq üçün tövsiyələrə əməl edin: layların sayını səhnə başına 30–40 ilə məhdudlaşdırın, üst-üstə düşən iç-içə pre-kompozisiyalardan qaçın, mürəkkəb animasiyalar üçün dotLottie istifadə edin.

// RecyclerView üçün Lottie optimallaşdırılması
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Kompozisiyanın yaddaşda keşlənməsi
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Təkrar istifadə üçün LottieAnimationView hovuzu
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)
    }
}

// Lazımsız imkanların söndürülməsi
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Kadrların sayının məhdudlaşdırılması

Əlavə optimallaşdırmalar: Android 4.4+ olan cihazlar üçün enableMergePathsForKitKatAndAbove(true) daxil edin — bu üst-üstə düşən konturları bir yola birləşdirərək draw calls sayını azaldır. JSON əvəzinə dotLottie istifadə edin — ikili format protobuf-serializasiya hesabına animasiyanı 50–80% sıxır, bu da pars etmə vaxtını qısaldır. RecyclerView-də animasiyalar üçün repeatCount = 0 (birdəfəlik oynatma) təyin edin və recyclerView.addOnScrollListener vasitəsilə sürüşdürmə zamanı animasiyanı dayandırın. Airbnb Engineering Blog (2025) məlumatına görə, bu tədbirlər CPU yükünü 40%-ə qədər azaldır.