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-এর বেশিরভাগ features সমর্থন করে: আকার, মাস্ক, ইফেক্ট, টেক্সট লেয়ার এবং ট্র্যাকিং। সীমাবদ্ধতা 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:)) দ্বারা নিয়ন্ত্রণ করা যেতে পারে। প্রোগ্রেস মোড অ্যানিমেশনকে স্ক্রোল জেসচারের সাথে সিঙ্ক করতে দেয়: স্ক্রিন যত বেশি স্ক্রোল হবে, অ্যানিমেশন তত বেশি অগ্রসর হবে — অনবোর্ডিং এবং প্যারালাক্স ইফেক্টের জন্য একটি জনপ্রিয় কৌশল।