Lottie: bu nədir, animasiyalar və mobil platformalarda necə işləyir

Lottie nədir və necə işləyir

Lottie — bu 2015-ci ildə Airbnb tərəfindən yaradılmış, vektor animasiyalarını real vaxtda render etmək üçün açıq mənbəli kitabxanadır. Tərtibatçı Adobe After Effects-də animasiya yaradır, onu Bodymovin plagin vasitəsilə JSON-a ixrac edir, Lottie isə bu JSON-u hədəf cihazda təbəqələri, formaları, şəffaflığı və animasiya əyrilərini şərh edərək oxudur.

Video fayllardan və ya GIF-dən fərqli olaraq, Lottie ekran təsvirindən asılı deyil — animasiya vektor şəkildə render edilir və istənilən DPI-li cihazlarda eyni görünür. JSON animasiyasının ölçüsü orta hesabla ekvivalent GIF və ya videodan 5-10 dəfə kiçikdir ki, bu da məhdud trafikli mobil tətbiqlər üçün vacibdir.

Airbnb Engineering məlumatlarına görə, Lottie tətbiqi animasiyaların ölçüsünü prekompozisiya edilmiş video ilə müqayisədə 80% azaldıb, kadr tezliyi bütün dəstəklənən cihazlarda 60 FPS olaraq qalıb. Hal-hazırda Lottie iOS, Android, Flutter, React Native, Web (HTML Canvas və SVG) və masaüstü platformalarda dəstəklənir.

Lottie-nin performansı nativ renderlə təmin edilir: iOS-da CALayer ilə Core Animation, Android-də isə JNI vasitəsilə C++-da öz Canvas rendererindən istifadə olunur. Bu, hətta orta seqment cihazlarda belə onlarla təbəqəli mürəkkəb animasiyaları kadr itkisi olmadan oxutmağa imkan verir. WebView həllərindən (GIF, APNG, video) fərqli olaraq, Lottie render üçün ayrı proses yaratmır və kadrları dekodlaşdırmaq üçün əlavə yaddaş sərfləmir.

Lottie-ni yüklənmə göstəriciləri, mikro qarşılıqlı iconlar, onboarding ekranları və bayram promosyon animasiyaları üçün istifadə edin, burada hamarlıq və kiçik ölçü vacibdir.

Lottie ekosisteminə səkkiz platforma üçün rəsmi oxuducular, brauzerdən öncədən baxış üçün LottieFiles redaktoru və minlərlə hazır animasiya ilə bazar daxildir. Tərtibatçı JSON-u yükləyə, layihəyə inteqrasiya edə və After Effects-i açmadan rəngləri və sürəti dizayn sisteminə uyğumlaşdıra bilər. LottieFiles həmçinin AIR linki ilə animasiyaları yükləmək imkanı ilə sürətləndirilmiş inteqrasiya üçün SDK təqdim edir ki, bu da App Store və ya Google Play-də tətbiqin yeni versiyasını dərc etmədən animasiyaları yeniləməyə imkan verir.

Lottie JSON formatı və Bodymovin

Lottie JSON sxemi — bu üç səviyyədən ibarət vektor animasiyasının təsviri üçün açıq standartdır: kompozisiya (composition), təbəqələr (layers) və formalar (shapes). Kompozisiyada metadatanı əhatə edir: kətan ölçüsü, kadr tezliyi və müddət.

JSON strukturu

JSON-un kök obyekti layers sahəsini — animasiya təbəqələrinin massivini ehtiva edir. Hər bir təbəqə forma (Shape Layer), şəkil (Image Layer), mətn (Text Layer) və ya prekompozisiya (PreComp Layer) ola bilər. Hər təbəqə üçün transformasiya xüsusiyyətləri müəyyən edilir: mövqe, miqyas, fırlanma və şəffaflıq açar kadrlara bağlı olaraq.

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

Açar kadrlar (Keyframes) vaxt damğaları, dəyərlər və interpolyasiya üçün Bezier əyriləri ilə massivlər şəklində verilir. Bodymovin After Effects əyrilərini avtomatik olaraq Lottie üçün başa düşülən formata çevirir, timing-i və ease funksiyalarını kadr dəqiqliyi ilə qoruyur.

Bodymovin — ixrac plagin

Bodymovin — bu kompozisiyanı Lottie JSON faylına ixrac edən Adobe After Effects üçün genişləndirmədir. Plagin After Effects-in əksər imkanlarını dəstəkləyir: formalar, maskalar, effektlər, mətn təbəqələri və izləmə. Məhdudiyyətlər 3D təbəqələrə və bəzi plaginlərə aiddir — onlar ixrac edilmir və animasiyanın 2D-yə qədər sadələşdirilməsini tələb edir.

iOS-də Lottie inteqrasiyası

iOS-da Lottie Swift Package Manager, CocoaPods və ya Carthage vasitəsilə inteqrasiya olunur. Əsas sinif — SwiftUI üçün LottieView və UIKit üçün LottieAnimationView. Lottie-ios paketinə paketdən, şəbəkədən və Data obyektlərindən animasiyaların dəstəyi daxildir.

SwiftUI-də LottieView

LottieView — bu SwiftUI üçün paketdən JSON fayl adını və ya şəbəkədən yükləmək üçün URL qəbul edən View komponentidir. Animasiya müəyyən edilmiş sürət və təkrarlama sayı ilə avtomatik oxudulur.

import Lottie

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

UIKit üçün Interface Builder və ya proqram vasitəsilə konfiqurasiya ilə LottieAnimationView istifadə olunur. View bütün animasiya hallarını dəstəkləyir: play, pause, stop, həmçinin məlumat yükləmək üçün gedişat paneli. LottieAnimationView siyahılarda animasiya edilmiş iconlar üçün UITableViewCell və ya UICollectionViewCell daxil edilə bilər — sürüşdürmə zamanı hücrənin animasiyası dayandırılır, ekranda görünəndə isə davam etdirilir ki, bu da CPU və GPU resurslarına qənaət edir.

Müasir iOS tərtibatı animasiya edilmiş onboarding və interaktiv elementlər yaratmaq üçün Lottie-ni SwiftUI ilə birlikdə fəal istifadə edir: ekranı sürüşdürdükdə animasiyanın gedişatı ScrollViewReader vasitəsilə sürüşdürmə mövqeyi ilə sinxronlaşdırılır. Bu, animasiyanın istifadəçinin barmaq hərəkətinə davamlı şəkildə əməl etdiyi parallaks effekti yaradır, ağır video fayllardan istifadə etmədən cəlb ediciliyi artırır.

Oxutmanın idarə edilməsi

iOS-da Lottie oxuducusu müəyyən kadrdan müəyyən kadra qədər oxutmaq, KeyPaths vasitəsilə doldurma/kontur rəngini dəyişmək və LottieAnimationDelegate vasitəsilə hadisələri dinləmək üçün API təqdim edir. Performansı optimallaşdırmaq üçün sürüşdürmə zamanı animasiyanı dayandırıb dayandıqda davam etdirə bilərsiniz.

Android-də Lottie inteqrasiyası

Android-də Lottie com.airbnb.android:lottie Gradle asılılığı vasitəsilə qoşulur. Əsas komponent — adi View kimi XML tərtibatında yerləşdirilə və atributlar və ya proqram vasitəsilə konfiqurasiya edilə bilən LottieAnimationView-dir.

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

XML tərtibatında LottieAnimationView atributlar vasitəsilə konfiqurasiya edilir: lottie_rawRes (res/raw-da JSON-a istinad), lottie_autoPlay, lottie_loop. Şəbəkədən yükləmə lottie_url və ya setAnimationFromUrl vasitəsilə dəstəklənir. Lottie-nin Android versiyası aparat sürətləndirilməsindən asılı olmayan öz Canvas rendererindən istifadə edir.

RawRes və şəbəkədən yükləmə

Statik animasiyalar üçün JSON res/raw-da yerləşdirilir və RawRes vasitəsilə istinad edilir. Dinamik animasiyalar üçün Lottie URL-dən və ya Data obyektindən JSON-u yükləmə faizini göstərən gedişat geri çağırışı ilə yükləyir. Lottie keşi yüklənmiş animasiyaları təkrar render zamanı təkrar yükləmənin qarşısını almaq üçün avtomatik yaddaşda saxlayır.

Android üçün Lottie RecyclerView-də animasiyanı birbaşa siyahı elementinə daxil edilmiş LottieAnimationView vasitəsilə dəstəkləyir. Performansı optimallaşdırmaq üçün gecikmiş yükləmə ilə setAnimation istifadə etmək və RecyclerView.OnChildAttachStateChangeListener geri çağırışı vasitəsilə ekranda görünməyən elementlər üçün animasiyanı söndürmək tövsiyə olunur. Bu, animasiya edilmiş iconlarla uzun siyahıları sürüşdürdükdə FPS düşməsinin qarşısını alır.

Lottie animasiyalarını fərdiləşdirmə və idarəetmə

Lottie orijinal After Effects faylını dəyişmədən hazır animasiyaları fərdiləşdirmək üçün güclü API təqdim edir. Bu, bir animasiyanı müxtəlif temalara, rənglərə və tətbiq ölçülərinə uyğunlaşdırmağa imkan verir.

KeyPath vasitəsilə rəngin dəyişdirilməsi

Doldurma və kontur rəngləri KeyPath — animasiya elementinə string yolu vasitəsilə icra zamanı dəyişdirilə bilər. Məsələn, səbət iconunun rəngini qırmızıdan göyə dəyişmək üçün onun KeyPath-ni tapmaq və yeni dəyər tətbiq etmək kifayətdir. Bu, müxtəlif rəng sxemləri üçün eyni animasiyanın bir neçə versiyasını saxlamaq ehtiyacını aradan qaldırır.

Sürət və gedişatın idarə edilməsi

Hər bir Lottie animasiyası sürət (animationSpeed), gedişat (setProgress) və kadr diapazonu (play(fromFrame:toFrame:)) ilə idarə edilə bilər. Gedişat rejimi animasiyanı sürüşdürmə jesti ilə sinxronlaşdırmağa imkan verir: ekran nə qədər çox sürüşdürülürsə, animasiya bir o qədər irəliləyir — bu onboarding və parallaks effektləri üçün məşhur texnikadır.