Lottie — यह क्या है, मोबाइल ऐप्स में वेक्टर एनिमेशन

Lottie क्या है?

Lottie — एक क्रॉस-प्लेटफ़ॉर्म लाइब्रेरी है जो वेक्टर एनिमेशन चलाने के लिए है, जिसे 2015 में Airbnb में विकसित किया गया था। यह भारी वीडियो फ़ाइलों और रास्टर स्प्राइट शीट की समस्या को हल करती है: डिज़ाइनर After Effects में एनिमेशन बनाता है, Bodymovin के माध्यम से JSON में निर्यात करता है, और डेवलपर इस फ़ाइल को मोबाइल ऐप में एम्बेड करता है। Lottie प्लेटफ़ॉर्म के आधार पर Canvas, Core Animation या Skia के माध्यम से प्रोग्रामेटिक रूप से एनिमेशन रेंडर करता है।

Lottie का मुख्य लाभ — वेक्टर एनिमेशन किसी भी स्क्रीन पर बिना गुणवत्ता हानि के स्केल होता है: Apple Watch से 4K टीवी तक। एनिमेशन JSON फ़ाइल का आकार आमतौर पर 5–50 KB होता है, जो समतुल्य वीडियो फ़ाइल से दस गुना छोटा होता है। Airbnb Engineering (2025) के अनुसार, Lottie Adobe After Effects की 80% से अधिक सुविधाओं का समर्थन करता है, जिसमें मास्क, प्रभाव, कर्व और एक्सप्रेशन शामिल हैं।

Bodymovin — After Effects के लिए एक प्लगइन है (मुफ्त, GitHub) जो Lottie रनटाइम द्वारा समझे जाने वाले JSON प्रारूप में एक कंपोज़िशन को सीरियलाइज़ करता है। After Effects CC 2018 और नए संस्करणों का समर्थन करता है। कई कीफ्रेम वाले जटिल एनिमेशन के लिए, dotLottie अनुशंसित है — एक प्रारूप जो Lottie JSON पर आधारित है लेकिन संपीड़ित और एक फ़ाइल में पैकेज किया गया है।

Lottie आर्किटेक्चर: रेंडरिंग कैसे काम करती है

Lottie एक स्तरित रेंडरिंग आर्किटेक्चर का उपयोग करता है जो प्लेटफ़ॉर्म की क्षमताओं के अनुकूल होता है। Android पर, एनिमेशन Canvas API के माध्यम से खींचा जाता है — Lottie का अपना रेंडरर (LottieDrawable), जो सिस्टम एनिमेशन का उपयोग नहीं करता है। iOS पर, Lottie Core Animation Layers पर निर्भर करता है, जो उच्च प्रदर्शन और 60 FPS प्रदान करता है। Flutter पर, Lottie CustomPainter के माध्यम से Skia Canvas का उपयोग करता है।

रेंडरिंग तीन चरणों से गुज़रती है: JSON पार्सिंग — एनिमेशन को LottieComposition में पार्स करना (सभी लेयर, आकार, कीफ्रेम); इंटरपोलेशन — ईज़िंग कर्व को ध्यान में रखते हुए कीफ्रेम के बीच मध्यवर्ती मानों की गणना करना; ड्राइंग — Canvas पर या Core Animation के माध्यम से वर्तमान फ्रेम रेंडर करना। Lottie हार्डवेयर त्वरण का समर्थन करता है: Android पर — Hardware Accelerator के साथ Canvas के माध्यम से त्वरण, iOS पर — Core Animation के अंतर्निहित GPU त्वरण के साथ CALayer।

Android (Kotlin) पर Lottie का उपयोग

Android पर, LottieAnimationView AppCompatImageView का विस्तार करता है और पूरे लोडिंग और रेंडरिंग चक्र को संभालता है। JSON फ़ाइल res/raw या assets फ़ोल्डर में रखी जाती है। LottieAnimationView प्लेबैक नियंत्रण का समर्थन करता है — play, pause, resume, setFrame, setProgress, repeat, speed — और AnimatorUpdateListener और AnimatorListener के माध्यम से सुनना।

<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 की प्रोग्रामेटिक सेटिंग
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 से लोड करना और कैशिंग
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — View के बिना कस्टम ड्राइंग
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Android सर्वोत्तम अभ्यास: बार-बार दोहराए जाने वाले एनिमेशन के लिए setCacheStrategy(CacheStrategy.Strong) का उपयोग करें — कंपोज़िशन मेमोरी में कैश हो जाता है, और प्रत्येक नया इंस्टेंस JSON को फिर से पार्स नहीं करता है। सूचियों (RecyclerView) के लिए, रेंडरिंग को ऑप्टिमाइज़ करने के लिए enableMergePathsForKitKatAndAbove(true) और disableExtraScaleModeForOlderWorkarounds() के साथ LottieAnimationView का उपयोग करें। पारदर्शी पृष्ठभूमि वाले एनिमेशन के लिए, GPU त्वरण के लिए android:layerType="hardware" सेट करें।

iOS (Swift) पर Lottie का उपयोग

iOS पर, AnimationView UIKit और SwiftUI के लिए मुख्य Lottie क्लास है। इसे Swift Package Manager या CocoaPods के माध्यम से जोड़ा जाता है। JSON फ़ाइलें प्रोजेक्ट बंडल में जोड़ी जाती हैं। AnimationView स्वचालित रूप से स्केल (तार्किक स्क्रीन घनत्व) निर्धारित करता है और 60 FPS पर लेयर रेंडर करने के लिए Core Animation का उपयोग करता है।

import Lottie

// UIKit: मैन्युअल नियंत्रण के साथ 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: प्रगति के साथ एनिमेशन (ईवेंट से जुड़ने के लिए)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: UIViewRepresentable के रूप में 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 में उपयोग
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

iOS सर्वोत्तम अभ्यास: उन एनिमेशन के लिए जो लोड होने के तुरंत बाद शुरू होते हैं, एक बार के एक्सेंट प्रभावों के लिए loopMode = .playOnce के साथ animationView.play(fromProgress: 0, toProgress: 1) का उपयोग करें। UITableView/UICollectionView में Lottie के लिए, LottieAnimation.cached के माध्यम से कैश की गई एनिमेशन फ़ाइल के साथ AnimationView का उपयोग करें। बड़ी संख्या में लेयर (50+) रेंडर करने से FPS गिर सकता है — ऐसे मामलों में, macOS के लिए renderingEngine = .mainThread (डिफ़ॉल्ट) या .coreAnimation सक्षम करें।

Lottie बनाम वीडियो: एनिमेशन प्रारूपों की तुलना

Lottie मौलिक रूप से वीडियो फ़ाइलों से भिन्न है: यह पिक्सेल संग्रहीत नहीं करता, बल्कि वेक्टर आकृतियों, उनके परिवर्तनों और समय के साथ परिवर्तन के वक्रों का वर्णन करता है। वीडियो (MP4, WebM) एक निश्चित रिज़ॉल्यूशन पर रास्टर फ्रेम का अनुक्रम है। अंतर फ़ाइल आकार, स्केलिंग गुणवत्ता, इंटरैक्टिविटी और प्रदर्शन में प्रकट होता है।

Lottie कब चुनें: लोडिंग आइकन, लाइक/रिएक्शन एनिमेशन, ऑनबोर्डिंग स्क्रीन, बटन की एक्सेंट माइक्रो-एनिमेशन। 3D प्रभाव, यथार्थवादी प्रकाश व्यवस्था या फोटोरियलिस्टिक पात्रों वाले जटिल दृश्यों के लिए, वीडियो अधिक व्यावहारिक विकल्प बना हुआ है। Lottie लंबे दृश्यों (10 सेकंड से अधिक) को चलाने के लिए डिज़ाइन नहीं किया गया है — एक एनिमेशन की इष्टतम अवधि 2–5 सेकंड है।

Lottie प्रदर्शन अनुकूलन

Lottie प्रदर्शन लेयर की संख्या, मास्क और प्रभावों की जटिलता और रेंडरर पर निर्भर करता है। मध्य-श्रेणी के उपकरणों पर 60 FPS बनाए रखने के लिए, इन अनुशंसाओं का पालन करें: प्रति दृश्य लेयर की संख्या 30–40 तक सीमित करें, ओवरलैपिंग नेस्टेड प्री-कंपोज़िशन से बचें, जटिल एनिमेशन के लिए dotLottie का उपयोग करें।

// RecyclerView के लिए Lottie अनुकूलन
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// मेमोरी में कंपोज़िशन कैशिंग
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// पुन: उपयोग के लिए LottieAnimationView पूल
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)
    }
}

// अनावश्यक सुविधाओं को अक्षम करना
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // फ्रेम संख्या सीमित करना

अतिरिक्त अनुकूलन: Android 4.4+ वाले उपकरणों के लिए enableMergePathsForKitKatAndAbove(true) सक्षम करें — यह ओवरलैपिंग पथों को एक पथ में विलय करता है, ड्रॉ कॉल की संख्या कम करता है। JSON के बजाय dotLottie का उपयोग करें — बाइनरी प्रारूप protobuf सीरियलाइज़ेशन के माध्यम से एनिमेशन को 50–80% तक संपीड़ित करता है, पार्सिंग समय कम करता है। RecyclerView में एनिमेशन के लिए, repeatCount = 0 (एकल प्ले) सेट करें और recyclerView.addOnScrollListener के माध्यम से स्क्रॉल करने पर एनिमेशन रोकें। Airbnb Engineering Blog (2025) के अनुसार, ये उपाय CPU लोड को 40% तक कम करते हैं।