Lottie: bu nima, animatsiyalar va mobil platformalarda qanday ishlaydi

Lottie nima va u qanday ishlaydi

Lottie — bu 2015 yilda Airbnb tomonidan yaratilgan, vektor animatsiyalarini real vaqtda render qilish uchun ochiq kodli kutubxona. Dasturchi Adobe After Effects-da animatsiya yaratadi, uni Bodymovin plagini orqali JSON-ga eksport qiladi, Lottie esa ushbu JSON-ni maqsadli qurilmada qatlamlar, shakllar, shaffoflik va animatsiya egri chiziqlarini talqin qilib o'ynatadi.

Video fayllar yoki GIF-dan farqli o'laroq, Lottie ekran o'lchamiga bog'liq emas — animatsiya vektor tarzida render qilinadi va har qanday DPI li qurilmalarda bir xil ko'rinadi. JSON animatsiyasining hajmi o'rtacha ekvivalent GIF yoki videodan 5-10 marta kichikroq, bu cheklangan trafikli mobil ilovalar uchun juda muhim.

Airbnb Engineering ma'lumotlariga ko'ra, Lottie joriy etilishi ilovadagi animatsiyalar hajmini Precomposed video bilan solishtirganda 80% ga kamaytirdi, kadrlar chastotasi esa barcha qo'llab-quvvatlanadigan qurilmalarda 60 FPS bo'lib qoldi. Bugungi kunda Lottie iOS, Android, Flutter, React Native, Web (HTML Canvas va SVG) va ish stoli platformalarida qo'llab-quvvatlanadi.

Lottie samaradorligi nativ renderlash bilan ta'minlanadi: iOS-da CALayer bilan Core Animation, Android-da JNI orqali C++ da o'z Canvas rendereridan foydalaniladi. Bu hatto o'rta segment qurilmalarda ham o'nlab qatlamli murakkab animatsiyalarni kadr yo'qotmasdan o'ynatish imkonini beradi. WebView yechimlaridan (GIF, APNG, video) farqli o'laroq, Lottie renderlash uchun alohida jarayon yaratmaydi va kadrlarni dekodlash uchun qo'shimcha xotira sarflamaydi.

Lottie-dan yuklash indikatorlari, mikro-interaksiyali belgilar, onboarding ekranlari va bayram promosyon animatsiyalari uchun foydalaning, bunda silliqlik va kichik hajm muhim.

Lottie ekotizimi sakkiz platforma uchun rasmiy pleerlar, brauzerda oldindan ko'rish uchun LottieFiles muharriri va minglab tayyor animatsiyalar bilan bozorni o'z ichiga oladi. Dasturchi JSON-ni yuklab, loyihaga integratsiya qilishi va After Effects-ni ochmasdan ranglar va tezlikni dizayn tizimiga moslashtirishi mumkin. LottieFiles shuningdek AIR havolasi orqali animatsiyalarni yuklash imkoniyati bilan tezlashtirilgan integratsiya uchun SDK taqdim etadi, bu App Store yoki Google Play-da ilovaning yangi versiyasini chop etmasdan qurilmalarda animatsiyalarni yangilash imkonini beradi.

Lottie JSON formati va Bodymovin

Lottie JSON sxemasi — bu uch darajadan iborat vektor animatsiyasini tavsiflash uchun ochiq standart: kompozitsiya (composition), qatlamlar (layers) va shakllar (shapes). Kompozitsiya metama'lumotlarni o'z ichiga oladi: tuval o'lchami, kadrlar chastotasi va davomiylik.

JSON tuzilishi

JSON ildiz obyekti layers maydonini — animatsiya qatlamlari massivini o'z ichiga oladi. Har bir qatlam shakl (Shape Layer), tasvir (Image Layer), matn (Text Layer) yoki prekompozitsiya (PreComp Layer) bo'lishi mumkin. Har bir qatlam uchun transformatsiya xususiyatlari belgilanadi: joylashuv, masshtab, aylanish va shaffoflik kalit kadrlarga bog'langan holda.

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

Kalit kadrlar (Keyframes) vaqt belgilari, qiymatlar va interpolyatsiya uchun Bezier egri chiziqlari bilan massivlar shaklida beriladi. Bodymovin After Effects egri chiziqlarini avtomatik ravishda Lottie uchun tushunarli formatga o'tkazadi, timing va ease funksiyalarini kadr aniqligi bilan saqlaydi.

Bodymovin — eksport plagini

Bodymovin — bu kompozitsiyani Lottie JSON fayliga eksport qiluvchi Adobe After Effects uchun kengaytma. Plagin After Effects-ning ko'pgina imkoniyatlarini qo'llab-quvvatlaydi: shakllar, maskalar, effektlar, matn qatlamlari va kuzatish. Cheklovlar 3D qatlamlar va ba'zi plaginlarga tegishli — ular eksport qilinmaydi va animatsiyani 2D ga soddalashtirishni talab qiladi.

Lottie-ni iOS-ga integratsiya qilish

iOS-da Lottie Swift Package Manager, CocoaPods yoki Carthage orqali integratsiya qilinadi. Asosiy sinf — SwiftUI uchun LottieView va UIKit uchun LottieAnimationView. Lottie-ios paketi paketdan, tarmoqdan va Data obyektlaridan animatsiyalarni qo'llab-quvvatlashni o'z ichiga oladi.

SwiftUI-da LottieView

LottieView — bu SwiftUI uchun paketdan JSON fayl nomini yoki tarmoqdan yuklash uchun URL-ni qabul qiluvchi View komponenti. Animatsiya belgilangan tezlik va takrorlash soni bilan avtomatik o'ynatiladi.

import Lottie

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

UIKit uchun Interface Builder yoki dasturiy ravishda sozlash bilan LottieAnimationView ishlatiladi. View barcha animatsiya holatlarini qo'llab-quvvatlaydi: play, pause, stop, shuningdek ma'lumotlarni yuklash uchun progress bar. LottieAnimationView ro'yxatlarda animatsion belgilar uchun UITableViewCell yoki UICollectionViewCell ichiga joylashtirilishi mumkin — aylantirish paytida katak animatsiyasi to'xtatiladi va ekranda paydo bo'lganda davom etadi, bu CPU va GPU resurslarini tejaydi.

Zamonaviy iOS dasturlash Lottie-ni SwiftUI bilan birgalikda animatsion onboarding ekranlari va interaktiv elementlarni yaratish uchun faol ishlatadi: ekranni aylantirishda animatsiya jarayoni ScrollViewReader orqali aylantirish pozitsiyasi bilan sinxronlanadi. Bu animatsiya foydalanuvchi barmoq harakatiga uzluksiz ergashadigan parallaks effektini yaratadi, og'ir video fayllardan foydalanmasdan jalb qilishni oshiradi.

O'ynatishni boshqarish

iOS-da Lottie pleeri ma'lum kadrdan ma'lum kadrgacha o'ynatish, KeyPaths orqali to'ldirish/kontur rangini o'zgartirish va LottieAnimationDelegate orqali hodisalarni tinglash uchun API taqdim etadi. Samaradorlikni optimallashtirish uchun aylantirish paytida animatsiyani to'xtatib, to'xtaganda davom ettirishingiz mumkin.

Lottie-ni Android-ga integratsiya qilish

Android-da Lottie com.airbnb.android:lottie Gradle bog'liqligi orqali ulanadi. Asosiy komponent — XML tartibida oddiy View sifatida joylashtirilishi va atributlar yoki dasturiy ravishda sozlanishi mumkin bo'lgan LottieAnimationView.

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

XML tartibida LottieAnimationView atributlar orqali sozlanadi: lottie_rawRes (res/raw da JSON-ga havola), lottie_autoPlay, lottie_loop. Tarmoqdan yuklash lottie_url yoki dasturiy ravishda setAnimationFromUrl orqali qo'llab-quvvatlanadi. Lottie-ning Android versiyasi apparat tezlashtirishdan mustaqil bo'lgan o'z Canvas rendereridan foydalanadi.

RawRes va tarmoqdan yuklash

Statik animatsiyalar uchun JSON res/raw da joylashtiriladi va RawRes orqali havola qilinadi. Dinamik animatsiyalar uchun Lottie URL yoki Data obyektidan JSON-ni yuklash foizini ko'rsatadigan progress callback bilan yuklaydi. Lottie keshi yuklangan animatsiyalarni qayta renderlashda qayta yuklashning oldini olish uchun avtomatik ravishda xotirada saqlaydi.

Android uchun Lottie RecyclerView-da animatsiyani to'g'ridan-to'g'ri ro'yxat elementiga o'rnatilgan LottieAnimationView orqali qo'llab-quvvatlaydi. Samaradorlikni optimallashtirish uchun kechiktirilgan yuklash bilan setAnimation dan foydalanish va RecyclerView.OnChildAttachStateChangeListener callback orqali ekranda ko'rinmaydigan elementlar uchun animatsiyani o'chirish tavsiya etiladi. Bu animatsion belgilar bilan uzun ro'yxatlarni aylantirishda FPS pasayishining oldini oladi.

Lottie animatsiyalarini sozlash va boshqarish

Lottie asl After Effects faylini o'zgartirmasdan tayyor animatsiyalarni sozlash uchun kuchli API taqdim etadi. Bu bitta animatsiyani turli mavzular, ranglar va ilova o'lchamlariga moslashtirish imkonini beradi.

KeyPath orqali rangni o'zgartirish

To'ldirish va kontur ranglari KeyPath — animatsiya elementiga satr yo'li orqali ish vaqtida o'zgartirilishi mumkin. Masalan, savat belgisi rangini qizildan ko'kka almashtirish uchun uning KeyPath-ni topish va yangi qiymatni qo'llash kifoya. Bu turli rang sxemalari uchun bir xil animatsiyaning bir nechta versiyalarini saqlash zaruratini yo'q qiladi.

Tezlik va taraqqiyotni boshqarish

Har bir Lottie animatsiyasini tezlik (animationSpeed), taraqqiyot (setProgress) va kadr diapazoni (play(fromFrame:toFrame:)) bo'yicha boshqarish mumkin. Taraqqiyot rejimi animatsiyani aylantirish imo-ishorasi bilan sinxronlash imkonini beradi: ekran qancha ko'p aylantirilsa, animatsiya shuncha oldinga siljiydi — bu onboarding va parallaks effektlari uchun mashhur usuldir.