Lottie — nedir, mobil uygulamalarda vektör animasyonu

Lottie nedir?

Lottie — vektör animasyonu oynatmak için çapraz platformlu bir kütüphane, 2015 yılında Airbnb'de geliştirildi. Ağır video dosyaları ve raster sprite sayfaları sorununu çözer: tasarımcı After Effects'te animasyon oluşturur, Bodymovin aracılığıyla JSON'a aktarır ve geliştirici bu dosyayı mobil uygulamaya gömer. Lottie, platforma bağlı olarak Canvas, Core Animation veya Skia aracılığıyla programatik olarak animasyon işler.

Lottie'nin ana avantajı — vektör animasyonu Apple Watch'tan 4K TV'lere kadar her ekranda kalite kaybı olmadan ölçeklenir. Animasyon JSON dosyası boyutu tipik olarak 5–50 KB'dir, bu da eşdeğer video dosyasından onlarca kat daha küçüktür. Airbnb Engineering (2025) verilerine göre Lottie, maskeler, efektler, eğriler ve ifadeler dahil olmak üzere Adobe After Effects özelliklerinin %80'inden fazlasını destekler.

Bodymovin — After Effects için bir eklentidir (ücretsiz, GitHub) ve Lottie çalışma zamanı tarafından anlaşılan JSON biçiminde bir kompozisyonu serileştirir. After Effects CC 2018 ve sonrasını destekler. Çok sayıda ana kare içeren karmaşık animasyonlar için dotLottie önerilir — Lottie JSON tabanlı ancak sıkıştırılmış ve tek bir dosyada paketlenmiş bir biçim.

Lottie Mimarisi: işleme nasıl çalışır

Lottie, platform yeteneklerine uyum sağlayan katmanlı bir işleme mimarisi kullanır. Android'de animasyon Canvas API aracılığıyla çizilir — Lottie'nin kendi işleyicisi (LottieDrawable), sistem animasyonlarını kullanmaz. iOS'te Lottie, Core Animation Layers'a dayanarak yüksek performans ve 60 FPS sağlar. Flutter'da Lottie, CustomPainter aracılığıyla Skia Canvas kullanır.

İşleme üç aşamadan geçer: JSON ayrıştırma — animasyonu LottieComposition'a (tüm katmanlar, şekiller, ana kareler) ayrıştırma; enterpolasyon — easing eğrilerini dikkate alarak ana kareler arasında ara değerler hesaplama; çizim — geçerli kareyi Canvas üzerinde veya Core Animation aracılığıyla işleme. Lottie donanım hızlandırmasını destekler: Android'de — Hardware Accelerator ile Canvas üzerinden hızlandırma, iOS'te — Core Animation'ın yerleşik GPU hızlandırması ile CALayer.

Android'de (Kotlin) Lottie Kullanımı

Android'de LottieAnimationView, AppCompatImageView'ı genişletir ve tüm yükleme ve işleme döngüsünü yönetir. JSON dosyası res/raw veya assets klasörüne yerleştirilir. LottieAnimationView oynatma kontrolünü destekler — play, pause, resume, setFrame, setProgress, repeat, speed — ve AnimatorUpdateListener ile AnimatorListener aracılığıyla dinleme.

<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 programatik kurulumu
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'ten yükleme ve önbelleğe alma
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

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

Android en iyi uygulamaları: sık tekrarlanan animasyonlar için setCacheStrategy(CacheStrategy.Strong) kullanın — kompozisyon bellekte önbelleğe alınır ve her yeni örnek JSON'ı yeniden ayrıştırmaz. Listeler (RecyclerView) için, işlemeyi optimize etmek amacıyla enableMergePathsForKitKatAndAbove(true) ve disableExtraScaleModeForOlderWorkarounds() ile LottieAnimationView kullanın. Şeffaf arka planlı animasyonlar için GPU hızlandırması adına android:layerType="hardware" olarak ayarlayın.

iOS'te (Swift) Lottie Kullanımı

iOS'te AnimationView, UIKit ve SwiftUI için ana Lottie sınıfıdır. Swift Package Manager veya CocoaPods aracılığıyla eklenir. JSON dosyaları proje paketine eklenir. AnimationView, ölçeği (mantıksal ekran yoğunluğu) otomatik olarak belirler ve katmanları 60 FPS'de işlemek için Core Animation kullanır.

import Lottie

// UIKit: manuel kontrollü 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("Animation segment finished: \(finished)")
}
view.addSubview(animationView)

// UIKit: ilerlemeli animasyon (olaylara bağlama için)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: UIViewRepresentable olarak 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'de kullanım
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

iOS en iyi uygulamaları: yüklemeden hemen sonra başlayan animasyonlar için, tek kullanımlık vurgu efektleri için loopMode = .playOnce ile animationView.play(fromProgress: 0, toProgress: 1) kullanın. UITableView/UICollectionView'da Lottie için, LottieAnimation.cached aracılığıyla önbelleğe alınmış animasyon dosyasıyla AnimationView kullanın. Çok sayıda katmanın (50+) işlenmesi FPS düşüşlerine neden olabilir — bu durumlarda macOS için renderingEngine = .mainThread (varsayılan) veya .coreAnimation'ı etkinleştirin.

Lottie vs video: animasyon biçimlerinin karşılaştırması

Lottie video dosyalarından temel olarak farklıdır: pikselleri depolamaz, vektör şekillerini, dönüşümlerini ve zaman içindeki değişim eğrilerini tanımlar. Video (MP4, WebM) sabit çözünürlükteki raster karelerin bir dizisidir. Fark, dosya boyutu, ölçekleme kalitesi, etkileşim ve performansta kendini gösterir.

Lottie ne zaman seçilmeli: yükleme simgeleri, beğeni/tepki animasyonları, tanıtım ekranları, düğmelerin vurgu mikro animasyonları. 3D efektler, gerçekçi aydınlatma veya fotogerçekçi karakterler içeren karmaşık sahneler için video daha pratik bir seçimdir. Lottie uzun sahneleri (10 saniyeden fazla) oynatmak için tasarlanmamıştır — bir animasyonun ideal süresi 2–5 saniyedir.

Lottie Performans Optimizasyonu

Lottie performansı katman sayısına, maskelerin ve efektlerin karmaşıklığına ve işleyiciye bağlıdır. Orta segment cihazlarda 60 FPS'yi korumak için şu önerileri izleyin: sahne başına katman sayısını 30–40 ile sınırlayın, örtüşen iç içe ön kompozisyonlardan kaçının, karmaşık animasyonlar için dotLottie kullanın.

// RecyclerView için Lottie optimizasyonu
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Kompozisyonun bellekte önbelleğe alınması
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Yeniden kullanım için LottieAnimationView havuzu
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)
    }
}

// Gereksiz özelliklerin devre dışı bırakılması
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Kare sayısının sınırlandırılması

Ek optimizasyonlar: Android 4.4+ cihazlar için enableMergePathsForKitKatAndAbove(true)'u etkinleştirin — bu, örtüşen yolları tek bir yolda birleştirerek çizim çağrılarının sayısını azaltır. JSON yerine dotLottie kullanın — ikili biçim, protobuf serileştirmesi yoluyla animasyonu %50–80 oranında sıkıştırarak ayrıştırma süresini kısaltır. RecyclerView'daki animasyonlar için repeatCount = 0 (tek oynatma) olarak ayarlayın ve recyclerView.addOnScrollListener ile kaydırma sırasında animasyonu durdurun. Airbnb Engineering Blog (2025) verilerine göre bu önlemler CPU yükünü %40'a kadar azaltır.