Lottie: ما هي، الرسوم المتحركة وكيف تعمل على المنصات المحمولة

ما هي Lottie وكيف تعمل

Lottie هي مكتبة مفتوحة المصدر أنشأتها Airbnb في 2015 لعرض الرسوم المتحركة المتجهية في الوقت الفعلي. يقوم المطور بإنشاء رسوم متحركة في Adobe After Effects، ويصدرها عبر إضافة Bodymovin إلى JSON، وتقوم Lottie بتشغيل هذا JSON على الجهاز المستهدف مع تفسير الطبقات والأشكال والشفافية ومنحنيات الرسوم المتحركة.

على عكس ملفات الفيديو أو GIF، Lottie مستقلة عن الدقة — يتم عرض الرسوم المتحركة بشكل متجهي وتبدو متطابقة على الأجهزة بأي DPI. حجم رسوم JSON المتحركة أصغر في المتوسط من 5 إلى 10 مرات من GIF أو فيديو مكافئ، وهو أمر حاسم لتطبيقات الهواتف المحمولة ذات النطاق الترددي المحدود.

وفقاً لهندسة Airbnb، أدى اعتماد Lottie إلى تقليل حجم الرسوم المتحركة في التطبيق بنسبة 80% مقارنة بتسلسلات الفيديو Precomposed، مع الحفاظ على 60 إطاراً في الثانية على جميع الأجهزة المدعومة. اليوم، Lottie مدعومة على iOS وAndroid وFlutter وReact Native والويب (HTML Canvas وSVG) ومنصات سطح المكتب.

يأتي أداء Lottie من العرض الأصلي: على iOS تستخدم Core Animation مع CALayer، وعلى Android — عارض Canvas خاص بها في C++ عبر JNI. هذا يسمح بتشغيل رسوم متحركة معقدة بعشرات الطبقات دون فقدان الإطارات حتى على الأجهزة متوسطة المدى. على عكس الحلول القائمة على WebView (GIF وAPNG والفيديو)، لا تنشئ Lottie عملية منفصلة للعرض ولا تستهلك ذاكرة إضافية لفك تشفير الإطارات.

استخدم Lottie لمؤشرات التحميل والأيقونات ذات التفاعلات الدقيقة وشاشات الترحيب والرسوم المتحركة الترويجية حيث تكون السلاسة والحجم الصغير مهمين.

يشمل نظام Lottie البيئي مشغلات رسمية لثماني منصات ومحرر LottieFiles للمعاينة في المتصفح وسوقاً بآلاف الرسوم المتحركة الجاهزة. يمكن للمطور تنزيل JSON ودمجه في مشروع وضبط الألوان والسرعة وفقاً لنظام التصميم دون فتح After Effects. يوفر LottieFiles أيضاً SDK للتكامل السريع مع إمكانية تحميل الرسوم المتحركة عبر رابط AIR، مما يسمح بتحديث الرسوم المتحركة على الأجهزة دون نشر نسخة جديدة من التطبيق في App Store أو Google Play.

تنسيق JSON لـ Lottie وBodymovin

مخطط JSON لـ Lottie هو معيار مفتوح لوصف الرسوم المتحركة المتجهية، يتكون من ثلاثة مستويات: التركيب (composition) والطبقات (layers) والأشكال (shapes). يحتوي التركيب على بيانات وصفية: حجم اللوحة ومعدل الإطارات والمدة.

هيكل 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 التي تصدر التركيب إلى ملف JSON بتنسيق Lottie. تدعم الإضافة معظم ميزات After Effects: الأشكال والأقنعة والتأثيرات وطبقات النص والتتبع. تنطبق القيود على الطبقات ثلاثية الأبعاد وبعض الإضافات — لا يتم تصديرها وتتطلب تبسيط الرسوم المتحركة إلى 2D.

تكامل Lottie على iOS

على iOS، يتم دمج Lottie عبر Swift Package Manager أو CocoaPods أو Carthage. الفئتان الرئيسيتان هما LottieView لـ SwiftUI وLottieAnimationView لـ UIKit. تتضمن حزمة lottie-ios دعم الرسوم المتحركة من الحزمة (bundle) والشبكة وكائنات Data.

LottieView في SwiftUI

LottieView هو مكون View لـ SwiftUI يقبل اسم ملف JSON من الحزمة أو URL للتحميل من الشبكة. يتم تشغيل الرسوم المتحركة تلقائياً بالسرعة وعدد التكرارات المحددين.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

لـ UIKit، يتم استخدام LottieAnimationView القابل للتكوين عبر Interface Builder أو برمجياً. تدعم هذه الواجهة جميع حالات الرسوم المتحركة: تشغيل، إيقاف مؤقت، توقف، بالإضافة إلى شريط تقدم لتحميل البيانات. يمكن دمج LottieAnimationView في UITableViewCell أو UICollectionViewCell لأيقونات متحركة في القوائم — عند التمرير، تتوقف الرسوم المتحركة، وعند ظهور الخلية على الشاشة تستأنف، مما يوفر موارد CPU وGPU.

يستخدم تطوير iOS الحديث Lottie بنشاط مع SwiftUI لإنشاء شاشات ترحيب متحركة وعناصر تفاعلية: عند تمرير الشاشة، يتزامن تقدم الرسوم المتحركة مع موضع التمرير عبر ScrollViewReader. هذا يخلق تأثير المنظر حيث تتبع الرسوم المتحركة باستمرار حركة إصبع المستخدم، مما يعزز التفاعل دون استخدام ملفات فيديو ثقيلة.

التحكم في التشغيل

يوفر مشغل Lottie على iOS API لـ التشغيل من إطار معين إلى إطار آخر، وتغيير ألوان التعبئة/الحدود عبر KeyPaths، والاستماع إلى الأحداث عبر LottieAnimationDelegate. يمكن إيقاف الرسوم المتحركة مؤقتاً أثناء التمرير واستئنافها عند التوقف لتحسين الأداء.

تكامل Lottie على Android

على Android، يتم إضافة Lottie عبر تبعية Gradle com.airbnb.android:lottie. المكون الرئيسي هو LottieAnimationView، الذي يمكن وضعه في تخطيط XML كعرض عادي وتكوينه عبر السمات أو برمجياً.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

في تخطيط XML، يتم تكوين LottieAnimationView عبر السمات: lottie_rawRes (مرجع إلى JSON في res/raw)، lottie_autoPlay، lottie_loop. يتم دعم التحميل من الشبكة عبر lottie_url أو برمجياً عبر setAnimationFromUrl. تستخدم نسخة Android من Lottie عارض Canvas الخاص بها، المستقل عن تسريع الأجهزة.

التحميل من RawRes والشبكة

للرسوم المتحركة الثابتة، يتم وضع JSON في res/raw والإشارة إليه عبر RawRes. للرسوم المتحركة الديناميكية، يقوم Lottie بتحميل JSON من URL أو كائن Data مع استدعاء تقدم يوضح نسبة التحميل. تقوم ذاكرة التخزين المؤقت لـ Lottie تلقائياً بحفظ الرسوم المتحركة المحملة في الذاكرة لتجنب إعادة التحميل عند العرض المتكرر.

يدعم Lottie لنظام Android الرسوم المتحركة في RecyclerView عبر LottieAnimationView المضمنة مباشرة في عناصر القائمة. لتحسين الأداء، يُنصح باستخدام setAnimation مع التحميل البطيء وتعطيل الرسوم المتحركة للعناصر غير المرئية على الشاشة عبر استدعاء RecyclerView.OnChildAttachStateChangeListener. هذا يمنع انخفاض FPS عند تمرير قوائم طويلة بأيقونات متحركة.

تخصيص والتحكم في رسوم Lottie المتحركة

توفر Lottie API قوية لتخصيص الرسوم المتحركة الجاهزة دون تعديل ملف After Effects الأصلي. هذا يسمح بتكييف رسم متحرك واحد مع سمات وألوان وأحجام تطبيق مختلفة.

تغيير اللون عبر KeyPath

يمكن تغيير ألوان التعبئة والحدود في وقت التشغيل عبر KeyPath — مسار نصي إلى عنصر في الرسوم المتحركة. على سبيل المثال، لتغيير لون أيقونة العربة من الأحمر إلى الأزرق، يكفي العثور على KeyPath الخاص بها وتطبيق القيمة الجديدة. هذا يلغي الحاجة إلى تخزين إصدارات متعددة لنفس الرسم المتحرك لأنظمة ألوان مختلفة.

التحكم في السرعة والتقدم

يمكن التحكم في كل رسم متحرك Lottie بالسرعة (animationSpeed) والتقدم (setProgress) ونطاق الإطارات (play(fromFrame:toFrame:)). يتيح وضع التقدم مزامنة الرسم المتحرك مع إيماءة التمرير: كلما تم تمرير الشاشة أكثر، كلما تقدم الرسم المتحرك أكثر — وهي تقنية شائعة للترحيب وتأثيرات المنظر.