Lottie: nedir, animasyonlar ve mobil platformlarda nasıl çalışır

Lottie Nedir ve Nasıl Çalışır

Lottie, 2015 yılında Airbnb tarafından oluşturulan, vektör animasyonlarını gerçek zamanlı olarak render etmek için açık kaynaklı bir kütüphanedir. Geliştirici Adobe After Effects'te bir animasyon oluşturur, Bodymovin eklentisi aracılığıyla JSON'a aktarır ve Lottie, katmanları, şekilleri, saydamlığı ve animasyon eğrilerini yorumlayarak bu JSON'u hedef cihazda oynatır.

Video dosyaları veya GIF'lerin aksine, Lottie çözünürlükten bağımsızdır — animasyon vektör olarak render edilir ve herhangi bir DPI'ya sahip cihazlarda aynı görünür. Bir JSON animasyonu, eşdeğer bir GIF veya videodan ortalama 5-10 kat daha küçüktür, bu da sınırlı bant genişliğine sahip mobil uygulamalar için kritiktir.

Airbnb Engineering'e göre, Lottie'nin benimsenmesi, Precomposed video dizilerine kıyasla uygulamadaki animasyon boyutunu %80 oranında azalttı ve tüm desteklenen cihazlarda 60 FPS'yi korudu. Bugün Lottie, iOS, Android, Flutter, React Native, Web (HTML Canvas ve SVG) ve masaüstü platformlarında desteklenmektedir.

Lottie'nin performansı yerel render'dan gelir: iOS'ta CALayer ile Core Animation kullanır, Android'de — JNI aracılığıyla C++'da kendi Canvas render'ını kullanır. Bu, orta segment cihazlarda bile düzinelerce katmana sahip karmaşık animasyonların kare düşüşü olmadan oynatılmasını sağlar. WebView tabanlı çözümlerin (GIF, APNG, video) aksine, Lottie render için ayrı bir işlem oluşturmaz ve kare kod çözme için ekstra bellek tüketmez.

Lottie'yi yüklenme göstergeleri, mikro etkileşimli simgeler, tanıtım ekranları ve akıcılık ile küçük dosya boyutunun önemli olduğu promosyon animasyonları için kullanın.

Lottie ekosistemi, sekiz platform için resmi oynatıcılar, tarayıcıda önizleme için LottieFiles düzenleyicisi ve binlerce hazır animasyon içeren bir pazar yeri içerir. Geliştirici bir JSON indirebilir, projeye entegre edebilir ve After Effects'i açmadan tasarım sistemine göre renkleri ve hızı ayarlayabilir. LottieFiles ayrıca, App Store veya Google Play'de uygulamanın yeni bir sürümünü yayınlamadan cihazlardaki animasyonları güncellemeye olanak tanıyan AIR bağlantısı üzerinden animasyon yükleme özelliğine sahip hızlandırılmış entegrasyon için bir SDK sağlar.

Lottie JSON Formatı ve Bodymovin

Lottie JSON şeması, vektör animasyonunu tanımlamak için üç seviyeden oluşan açık bir standarttır: kompozisyon, katmanlar ve şekiller. Kompozisyon meta verileri içerir: tuval boyutu, kare hızı ve süre.

JSON Yapısı

Kök JSON nesnesi, layers alanını içerir — bir animasyon katmanları dizisi. Her katman bir Shape Layer, Image Layer, Text Layer veya PreComp Layer olabilir. Her katman için anahtarlara bağlı dönüşüm özellikleri tanımlanır: konum, ölçek, döndürme ve opaklık.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

Ana kareler (Keyframes), enterpolasyon için zaman damgaları, değerler ve Bezier eğrileri içeren diziler olarak tanımlanır. Bodymovin, After Effects eğrilerini otomatik olarak Lottie uyumlu bir formata dönüştürür ve kare düzeyinde doğrulukla zamanlamayı ve yumuşatma işlevlerini korur.

Bodymovin — Dışa Aktarma Eklentisi

Bodymovin, bir kompozisyonu Lottie JSON dosyasına aktaran bir Adobe After Effects uzantısıdır. Eklenti, After Effects'in çoğu özelliğini destekler: şekiller, maskeler, efektler, metin katmanları ve izleme. Sınırlamalar 3D katmanlar ve bazı eklentiler için geçerlidir — bunlar dışa aktarılmaz ve animasyonun 2D'ye basitleştirilmesini gerektirir.

iOS'ta Lottie Entegrasyonu

iOS'ta Lottie, Swift Package Manager, CocoaPods veya Carthage aracılığıyla entegre edilir. Ana sınıflar SwiftUI için LottieView ve UIKit için LottieAnimationView'dır. lottie-ios paketi, bundle, ağ ve Data nesnelerinden animasyonları destekler.

SwiftUI'da LottieView

LottieView, bundle'dan bir JSON dosya adını veya ağdan yükleme için bir URL'yi kabul eden SwiftUI için bir View bileşenidir. Animasyon, belirtilen hızda ve tekrar sayısında otomatik olarak oynatılır.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

UIKit için LottieAnimationView kullanılır, Interface Builder veya programlı olarak yapılandırılabilir. View, tüm animasyon durumlarını destekler: play, pause, stop ve ayrıca veri yükleme için bir ilerleme çubuğu. LottieAnimationView, listelerde animasyonlu simgeler için UITableViewCell veya UICollectionViewCell'e gömülebilir — kaydırma sırasında animasyon duraklar ve hücre ekranda göründüğünde devam eder, CPU ve GPU kaynaklarından tasarruf sağlar.

Modern iOS geliştirme, animasyonlu tanıtım ekranları ve etkileşimli öğeler oluşturmak için SwiftUI ile Lottie'yi aktif olarak kullanır: kaydırma sırasında animasyon ilerlemesi, ScrollViewReader aracılığıyla kaydırma konumuyla senkronize olur. Bu, animasyonun kullanıcının parmak hareketini sürekli olarak takip ettiği bir paralaks efekti yaratarak ağır video dosyaları kullanmadan etkileşimi artırır.

Oynatma Kontrolü

iOS'taki Lottie oynatıcısı, belirli bir kareden diğerine oynatma, KeyPaths aracılığıyla dolgu/kontur renklerini değiştirme ve LottieAnimationDelegate aracılığıyla olayları dinleme için API sağlar. Performansı optimize etmek için kaydırma sırasında animasyon duraklatılabilir ve durduğunda devam ettirilebilir.

Android'de Lottie Entegrasyonu

Android'de Lottie, com.airbnb.android:lottie Gradle bağımlılığı aracılığıyla eklenir. Ana bileşen LottieAnimationView'dır, XML düzeninde normal bir View olarak yerleştirilebilir ve öznitelikler veya programlı olarak yapılandırılabilir.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

XML düzeninde, LottieAnimationView öznitelikler aracılığıyla yapılandırılır: lottie_rawRes (res/raw içindeki JSON referansı), lottie_autoPlay, lottie_loop. Ağdan yükleme lottie_url veya programlı olarak setAnimationFromUrl aracılığıyla desteklenir. Lottie'nin Android sürümü, donanım hızlandırmadan bağımsız kendi Canvas render'ını kullanır.

RawRes ve Ağdan Yükleme

Statik animasyonlar için JSON, res/raw içine yerleştirilir ve RawRes aracılığıyla referans alınır. Dinamik animasyonlar için Lottie, indirme yüzdesini gösteren bir ilerleme geri çağrısı ile bir URL veya Data nesnesinden JSON yükler. Lottie önbelleği, yüklenen animasyonları otomatik olarak bellekte tutarak sonraki render'larda yeniden indirmeyi önler.

Android için Lottie, doğrudan liste öğelerine gömülü LottieAnimationView aracılığıyla RecyclerView'da animasyonu destekler. Performans optimizasyonu için, gecikmeli yükleme ile setAnimation kullanılması ve RecyclerView.OnChildAttachStateChangeListener geri çağrısı aracılığıyla ekran dışı öğeler için animasyonun devre dışı bırakılması önerilir. Bu, animasyonlu simgelere sahip uzun listeleri kaydırırken FPS düşüşlerini önler.

Lottie Animasyonlarını Özelleştirme ve Kontrol Etme

Lottie, orijinal After Effects dosyasını değiştirmeden hazır animasyonları özelleştirmek için güçlü bir API sağlar. Bu, tek bir animasyonu farklı temalara, renklere ve uygulama boyutlarına uyarlamaya olanak tanır.

KeyPath ile Renk Değiştirme

Dolgu ve kontur renkleri, KeyPath (bir animasyon öğesine dize yolu) aracılığıyla çalışma zamanında değiştirilebilir. Örneğin, bir sepet simgesinin rengini kırmızıdan maviye değiştirmek için KeyPath'ini bulun ve yeni değeri uygulayın. Bu, farklı renk şemaları için aynı animasyonun birden çok sürümünü saklama ihtiyacını ortadan kaldırır.

Hız ve İlerleme Kontrolü

Her Lottie animasyonu hız (animationSpeed), ilerleme (setProgress) ve kare aralığı (play(fromFrame:toFrame:)) ile kontrol edilebilir. İlerleme modu, animasyonu bir kaydırma hareketiyle senkronize etmeye olanak tanır: ekran ne kadar kaydırılırsa, animasyon o kadar ilerler — tanıtım ekranları ve paralaks efektleri için popüler bir tekniktir.