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 فیلڈ ہوتا ہے — اینیمیشن تہوں کی ایک صف۔ ہر تہہ Shape Layer، Image Layer، Text Layer یا PreComp Layer ہو سکتی ہے۔ ہر تہہ کے لیے ٹرانسفارم خصوصیات بیان کی جاتی ہیں: پوزیشن، اسکیل، گردش اور کلیدی فریموں سے منسلک شفافیت۔

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

کلیدی فریم (Keyframes) کو ٹائم اسٹیمپ، اقدار اور انٹرپولیشن کے لیے بیزیئر منحنی خطوط والی صفوں کے طور پر بیان کیا جاتا ہے۔ 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 کے ذریعے فل/اسٹروک رنگ تبدیل کرنے اور 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 کے ذریعے معاون ہے۔ Android ورژن Lottie اپنا 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 کے ذریعے رنگ تبدیل کرنا

فل اور اسٹروک رنگ KeyPath کے ذریعے رن ٹائم پر تبدیل کیے جا سکتے ہیں — اینیمیشن عنصر کا ایک سٹرنگ راستہ۔ مثال کے طور پر، کارٹ آئیکن کا رنگ سرخ سے نیلا تبدیل کرنے کے لیے، اس کا KeyPath تلاش کریں اور نئی قدر لگائیں۔ یہ مختلف رنگ سکیموں کے لیے ایک ہی اینیمیشن کے متعدد ورژن ذخیرہ کرنے کی ضرورت کو ختم کرتا ہے۔

رفتار اور پیش رفت کا کنٹرول

ہر Lottie اینیمیشن کو رفتار (animationSpeed)، پیش رفت (setProgress) اور فریم رینج (play(fromFrame:toFrame:)) کے ذریعے کنٹرول کیا جا سکتا ہے۔ پیش رفت موڈ اینیمیشن کو اسکرول اشارے کے ساتھ مطابقت پذیر کرنے کی اجازت دیتا ہے: اسکرین جتنی زیادہ اسکرول ہوگی، اینیمیشن اتنی ہی آگے بڑھے گی — آن بورڈنگ اور پیرالاکس اثرات کے لیے ایک مقبول تکنیک۔