Lottie: यह क्या है, एनिमेशन और यह मोबाइल प्लेटफ़ॉर्म पर कैसे काम करता है

Lottie क्या है और यह कैसे काम करता है

Lottie एक ओपन-सोर्स लाइब्रेरी है जिसे Airbnb ने 2015 में रीयल-टाइम में वेक्टर एनिमेशन रेंडर करने के लिए बनाया था। डेवलपर Adobe After Effects में एक एनिमेशन बनाता है, इसे Bodymovin प्लगइन के माध्यम से JSON में निर्यात करता है, और Lottie उस JSON को लक्ष्य डिवाइस पर लेयर, आकार, पारदर्शिता और एनिमेशन कर्व की व्याख्या करके चलाता है।

वीडियो फ़ाइलों या GIF के विपरीत, Lottie रिज़ॉल्यूशन-स्वतंत्र है — एनिमेशन वेक्टर रूप में रेंडर होता है और किसी भी DPI वाले डिवाइस पर समान दिखता है। एक JSON एनिमेशन औसतन समकक्ष GIF या वीडियो से 5-10 गुना छोटा होता है, जो सीमित बैंडविड्थ वाले मोबाइल एप्लिकेशन के लिए महत्वपूर्ण है।

Airbnb Engineering के अनुसार, Lottie को अपनाने से एप्लिकेशन में एनिमेशन का आकार Precomposed वीडियो अनुक्रमों की तुलना में 80% कम हो गया, जबकि सभी समर्थित डिवाइसों पर 60 FPS बना रहा। आज Lottie iOS, Android, Flutter, React Native, Web (HTML Canvas और SVG) और डेस्कटॉप प्लेटफ़ॉर्म पर समर्थित है।

Lottie का प्रदर्शन मूल रेंडरिंग से आता है: iOS पर यह CALayer के साथ Core Animation का उपयोग करता है, Android पर — JNI के माध्यम से C++ में अपना स्वयं का Canvas रेंडरर। यह मध्य-श्रेणी के डिवाइसों पर भी दर्जनों लेयर वाले जटिल एनिमेशन को बिना फ्रेम ड्रॉप के चलाने की अनुमति देता है। WebView-आधारित समाधानों (GIF, APNG, वीडियो) के विपरीत, Lottie रेंडरिंग के लिए अलग प्रक्रिया नहीं बनाता और फ्रेम डिकोडिंग के लिए अतिरिक्त मेमोरी नहीं खपाता।

Lottie का उपयोग लोडिंग इंडिकेटर, माइक्रो-इंटरैक्शन वाले आइकन, ऑनबोर्डिंग स्क्रीन और त्योहारी प्रोमो एनिमेशन के लिए करें जहाँ स्मूथनेस और छोटा फ़ाइल आकार महत्वपूर्ण हो।

Lottie इकोसिस्टम में आठ प्लेटफ़ॉर्म के लिए आधिकारिक प्लेयर, ब्राउज़र में पूर्वावलोकन के लिए LottieFiles संपादक और हज़ारों तैयार एनिमेशन के साथ एक मार्केटप्लेस शामिल है। डेवलपर JSON डाउनलोड कर सकता है, इसे प्रोजेक्ट में एकीकृत कर सकता है और After Effects खोले बिना डिज़ाइन सिस्टम के अनुसार रंग और गति को समायोजित कर सकता है। LottieFiles AIR लिंक के माध्यम से एनिमेशन लोड करने की क्षमता के साथ तेज़ एकीकरण के लिए SDK भी प्रदान करता है, जिससे App Store या Google Play में एप्लिकेशन का नया संस्करण प्रकाशित किए बिना डिवाइसों पर एनिमेशन अपडेट किए जा सकते हैं।

Lottie JSON प्रारूप और Bodymovin

Lottie JSON स्कीमा वेक्टर एनिमेशन का वर्णन करने के लिए एक ओपन स्टैंडर्ड है, जिसमें तीन स्तर होते हैं: कंपोज़िशन, लेयर और आकार। कंपोज़िशन में मेटाडेटा होता है: कैनवास का आकार, फ्रेम दर और अवधि।

JSON संरचना

रूट JSON ऑब्जेक्ट में layers फ़ील्ड होता है — एनिमेशन लेयर की एक सरणी। प्रत्येक लेयर शेप लेयर, इमेज लेयर, टेक्स्ट लेयर या PreComp लेयर हो सकती है। प्रत्येक लेयर के लिए ट्रांसफ़ॉर्म गुण परिभाषित किए जाते हैं: स्थिति, स्केल, घूर्णन और कीफ्रेम से बंधी अपारदर्शिता।

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

कीफ्रेम को टाइमस्टैम्प, मान और इंटरपोलेशन के लिए बेज़ियर कर्व वाली सरणियों के रूप में परिभाषित किया जाता है। Bodymovin स्वचालित रूप से After Effects कर्व को Lottie-संगत प्रारूप में परिवर्तित करता है, फ्रेम-स्तर की सटीकता के साथ टाइमिंग और ईज़िंग फ़ंक्शन को संरक्षित करता है।

Bodymovin — निर्यात प्लगइन

Bodymovin एक Adobe After Effects एक्सटेंशन है जो कंपोज़िशन को Lottie JSON फ़ाइल में निर्यात करता है। प्लगइन After Effects की अधिकांश सुविधाओं का समर्थन करता है: आकार, मास्क, प्रभाव, टेक्स्ट लेयर और ट्रैकिंग। सीमाएँ 3D लेयर और कुछ प्लगइन पर लागू होती हैं — वे निर्यात नहीं होते और एनिमेशन को 2D तक सरल बनाने की आवश्यकता होती है।

iOS पर Lottie एकीकरण

iOS पर Lottie को Swift Package Manager, CocoaPods या Carthage के माध्यम से एकीकृत किया जाता है। मुख्य क्लास SwiftUI के लिए LottieView और UIKit के लिए LottieAnimationView हैं। lottie-ios पैकेज बंडल, नेटवर्क और Data ऑब्जेक्ट से एनिमेशन का समर्थन करता है।

SwiftUI में LottieView

LottieView SwiftUI के लिए एक View घटक है जो बंडल से JSON फ़ाइल नाम या नेटवर्क लोडिंग के लिए URL स्वीकार करता है। एनिमेशन निर्दिष्ट गति और पुनरावृत्ति संख्या पर स्वचालित रूप से चलता है।

import Lottie

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

UIKit के लिए, LottieAnimationView का उपयोग किया जाता है, जिसे Interface Builder या प्रोग्रामेटिक रूप से कॉन्फ़िगर किया जा सकता है। यह View सभी एनिमेशन स्थितियों का समर्थन करता है: play, pause, stop, साथ ही डेटा लोडिंग के लिए प्रोग्रेस बार। LottieAnimationView को सूचियों में एनिमेटेड आइकन के लिए UITableViewCell या UICollectionViewCell में एम्बेड किया जा सकता है — स्क्रोल करते समय एनिमेशन रुक जाता है और सेल स्क्रीन पर दिखाई देने पर फिर से शुरू हो जाता है, जिससे CPU और GPU संसाधन बचते हैं।

आधुनिक iOS डेवलपमेंट सक्रिय रूप से एनिमेटेड ऑनबोर्डिंग स्क्रीन और इंटरैक्टिव तत्व बनाने के लिए SwiftUI के साथ Lottie का उपयोग करता है: स्क्रोल करने पर एनिमेशन प्रोग्रेस ScrollViewReader के माध्यम से स्क्रोल स्थिति के साथ सिंक होता है। यह एक पैरालैक्स प्रभाव बनाता है जहाँ एनिमेशन उपयोगकर्ता की उंगली की गति का लगातार अनुसरण करता है, भारी वीडियो फ़ाइलों के बिना जुड़ाव बढ़ाता है।

प्लेबैक नियंत्रण

iOS पर Lottie प्लेयर एक विशिष्ट फ्रेम से दूसरे फ्रेम तक प्लेबैक, KeyPaths के माध्यम से fill/stroke रंग बदलने और LottieAnimationDelegate के माध्यम से ईवेंट सुनने के लिए API प्रदान करता है। प्रदर्शन को अनुकूलित करने के लिए स्क्रोल करते समय एनिमेशन को रोका और रुकने पर फिर से शुरू किया जा सकता है।

Android पर Lottie एकीकरण

Android पर Lottie को Gradle निर्भरता com.airbnb.android:lottie के माध्यम से जोड़ा जाता है। मुख्य घटक LottieAnimationView है, जिसे XML लेआउट में एक सामान्य View के रूप में रखा जा सकता है और विशेषताओं या प्रोग्रामेटिक रूप से कॉन्फ़िगर किया जा सकता है।

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

XML लेआउट में, LottieAnimationView को विशेषताओं के माध्यम से कॉन्फ़िगर किया जाता है: lottie_rawRes (res/raw में JSON का संदर्भ), lottie_autoPlay, lottie_loop। नेटवर्क लोडिंग lottie_url या प्रोग्रामेटिक रूप से setAnimationFromUrl के माध्यम से समर्थित है। Lottie का Android संस्करण हार्डवेयर त्वरण से स्वतंत्र, अपने स्वयं के Canvas रेंडरर का उपयोग करता है।

RawRes और नेटवर्क से लोड करना

स्थिर एनिमेशन के लिए, JSON को res/raw में रखा जाता है और RawRes के माध्यम से संदर्भित किया जाता है। गतिशील एनिमेशन के लिए, Lottie URL या Data ऑब्जेक्ट से JSON लोड करता है जिसमें डाउनलोड प्रतिशत दिखाने वाला प्रोग्रेस कॉलबैक होता है। Lottie कैश स्वचालित रूप से लोड किए गए एनिमेशन को मेमोरी में रखता है ताकि बार-बार रेंडर करने पर पुनः डाउनलोड करने से बचा जा सके।

Android के लिए Lottie सीधे सूची आइटम में एम्बेडेड LottieAnimationView के माध्यम से RecyclerView में एनिमेशन का समर्थन करता है। प्रदर्शन अनुकूलन के लिए, विलंबित लोडिंग के साथ setAnimation का उपयोग करने और RecyclerView.OnChildAttachStateChangeListener कॉलबैक के माध्यम से स्क्रीन से बाहर के तत्वों के लिए एनिमेशन बंद करने की अनुशंसा की जाती है। यह एनिमेटेड आइकन वाली लंबी सूचियों को स्क्रोल करते समय FPS ड्रॉप को रोकता है।

Lottie एनिमेशन को कस्टमाइज़ और नियंत्रित करना

Lottie मूल After Effects फ़ाइल को संशोधित किए बिना तैयार एनिमेशन को कस्टमाइज़ करने के लिए एक शक्तिशाली API प्रदान करता है। यह एक ही एनिमेशन को विभिन्न थीम, रंग और एप्लिकेशन आकारों के अनुकूल बनाने की अनुमति देता है।

KeyPath के माध्यम से रंग बदलना

Fill और stroke रंगों को KeyPath के माध्यम से रनटाइम पर बदला जा सकता है — एनिमेशन तत्व के लिए एक स्ट्रिंग पथ। उदाहरण के लिए, कार्ट आइकन के रंग को लाल से नीला बदलने के लिए, उसका KeyPath ढूँढ़ें और नया मान लागू करें। यह विभिन्न रंग योजनाओं के लिए एक ही एनिमेशन के कई संस्करण संग्रहीत करने की आवश्यकता को समाप्त करता है।

गति और प्रोग्रेस नियंत्रण

प्रत्येक Lottie एनिमेशन को गति (animationSpeed), प्रोग्रेस (setProgress) और फ्रेम रेंज (play(fromFrame:toFrame:)) द्वारा नियंत्रित किया जा सकता है। प्रोग्रेस मोड एनिमेशन को स्क्रोल जेस्चर के साथ सिंक करने की अनुमति देता है: स्क्रीन जितनी अधिक स्क्रोल होगी, एनिमेशन उतना ही आगे बढ़ेगा — ऑनबोर्डिंग और पैरालैक्स प्रभावों के लिए एक लोकप्रिय तकनीक।