Lottie — یہ کیا ہے، موبائل ایپس میں ویکٹر اینیمیشن

Lottie کیا ہے؟

Lottie — ایک کراس پلیٹ فارم لائبریری ہے جو ویکٹر اینیمیشن چلانے کے لیے ہے، 2015 میں Airbnb میں تیار کی گئی۔ یہ بھاری ویڈیو فائلوں اور راسٹر اسپرائٹ شیٹس کے مسئلے کو حل کرتی ہے: ڈیزائنر After Effects میں اینیمیشن بناتا ہے، Bodymovin کے ذریعے JSON میں برآمد کرتا ہے، اور ڈویلپر اس فائل کو موبائل ایپ میں ضم کرتا ہے۔ Lottie پلیٹ فارم کے لحاظ سے Canvas، Core Animation یا Skia کے ذریعے پروگرام کے ذریعے اینیمیشن رینڈر کرتی ہے۔

Lottie کا اہم فائدہ — ویکٹر اینیمیشن Apple Watch سے 4K TV تک کسی بھی اسکرین پر معیار کی کمی کے بغیر اسکیل ہوتی ہے۔ اینیمیشن 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% تک کم کرتے ہیں۔