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% পর্যন্ত কমায়।