Lottie — ما هي، الرسوم المتحركة المتجهة في تطبيقات الجوال

ما هو Lottie؟

Lottie — مكتبة متعددة المنصات لتشغيل الرسوم المتحركة المتجهة، تم تطويرها في Airbnb في عام 2015. إنها تحل مشكلة ملفات الفيديو الثقيلة وأوراق السبريت النقطية: يقوم المصمم بإنشاء الرسوم المتحركة في After Effects، ويصدرها عبر Bodymovin إلى JSON، ويقوم المطور بتضمين هذا الملف في تطبيق الجوال. يقوم Lottie بعرض الرسوم المتحركة برمجياً عبر Canvas أو Core Animation أو Skia، حسب المنصة.

الميزة الرئيسية Lottie — أن الرسوم المتحركة المتجهة تتدرج دون فقدان الجودة على أي شاشة: من Apple Watch إلى تلفزيونات 4K. حجم ملف JSON للرسوم المتحركة عادةً ما يكون 5–50 كيلوبايت، وهو أصغر بعشرات المرات من ملف الفيديو المكافئ. وفقاً Airbnb Engineering (2025)، يدعم Lottie أكثر من 80% من ميزات Adobe After Effects، بما في ذلك الأقنعة والتأثيرات والمنحنيات والتعبيرات.

Bodymovin — هي إضافة لـ After Effects (مجانية، GitHub) تقوم بتسلسل التركيبة إلى تنسيق JSON يمكن لوقت تشغيل Lottie فهمه. تدعم After Effects CC 2018 والإصدارات الأحدث. للرسوم المتحركة المعقدة مع العديد من الإطارات الرئيسية، يُوصى باستخدام dotLottie — تنسيق يعتمد على Lottie JSON ولكنه مضغوط ومعبأ في ملف واحد.

هندسة Lottie: كيف يعمل العرض

Lottie يستخدم بنية عرض متعددة الطبقات تتكيف مع إمكانيات المنصة. على Android، يتم رسم الرسوم المتحركة عبر واجهة Canvas — العارض الخاص Lottie (LottieDrawable)، الذي لا يستخدم رسوم النظام المتحركة. على iOS، يعتمد Lottie على Core Animation Layers، مما يوفر أداءً عالياً و 60 إطاراً في الثانية. على Flutter، يستخدم Lottie Skia Canvas عبر CustomPainter.

يمر العرض بثلاث مراحل: تحليل JSON — تحليل الرسوم المتحركة إلى LottieComposition (جميع الطبقات والأشكال والإطارات الرئيسية)؛ الاستيفاء — حساب القيم الوسيطة بين الإطارات الرئيسية مع مراعاة منحنيات التسريع؛ الرسم — عرض الإطار الحالي على Canvas أو عبر Core Animation. يدعم Lottie تسريع الأجهزة: على Android — التسريع عبر Canvas مع Hardware Accelerator، على iOS — CALayer مع تسريع GPU المدمج لـ Core Animation.

استخدام Lottie على Android (Kotlin)

على 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)، استخدم LottieAnimationView مع enableMergePathsForKitKatAndAbove(true) و disableExtraScaleModeForOlderWorkarounds() لتحسين العرض. للرسوم المتحركة ذات الخلفية الشفافة، قم بتعيين android:layerType="hardware" لتسريع GPU.

استخدام Lottie على iOS (Swift)

على iOS، AnimationView هو الفئة الرئيسية Lottie لـ UIKit و SwiftUI. يتم إضافته عبر Swift Package Manager أو CocoaPods. يتم إضافة ملفات JSON إلى bundle المشروع. يحدد AnimationView تلقائياً المقياس (كثافة الشاشة المنطقية) ويستخدم Core Animation لعرض الطبقات بمعدل 60 إطاراً في الثانية.

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: LottieView كـ UIViewRepresentable
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: للرسوم المتحركة التي تبدأ فور التحميل، استخدم animationView.play(fromProgress: 0, toProgress: 1) مع loopMode = .playOnce للتأثيرات المميزة لمرة واحدة. لـ Lottie في UITableView/UICollectionView، استخدم AnimationView مع ملف رسوم متحركة مخبأ عبر LottieAnimation.cached. قد يتسبب عرض عدد كبير من الطبقات (50+) في انخفاض FPS — في هذه الحالات، قم بتمكين renderingEngine = .mainThread (افتراضي) أو .coreAnimation لـ macOS.

Lottie مقابل الفيديو: مقارنة تنسيقات الرسوم المتحركة

Lottie يختلف جوهرياً عن ملفات الفيديو: فهو لا يخزن البكسلات، بل يصف الأشكال المتجهة وتحولاتها ومنحنيات التغيير بمرور الوقت. الفيديو (MP4, WebM) عبارة عن سلسلة من الإطارات النقطية بدقة ثابتة. يتجلى الاختلاف في حجم الملف وجودة القياس والتفاعل والأداء.

متى تختار Lottie: أيقونات التحميل، رسوم متحركة للإعجابات/التفاعلات، شاشات الترحيب، الرسوم المتحركة الدقيقة للأزرار. للمشاهد المعقدة مع تأثيرات 3D أو إضاءة واقعية أو شخصيات فوتوغرافية، يبقى الفيديو خياراً أكثر عملية. Lottie غير مصمم لتشغيل المشاهد الطويلة (أكثر من 10 ثوانٍ) — المدة المثلى للرسوم المتحركة الواحدة هي 2–5 ثوانٍ.

تحسين أداء Lottie

أداء Lottie يعتمد على عدد الطبقات وتعقيد الأقنعة والتأثيرات والعارض. للحفاظ على 60 إطاراً في الثانية على الأجهزة متوسطة المدى، اتبع هذه التوصيات: حدد عدد الطبقات إلى 30–40 لكل مشهد، وتجنب التداخل في pre-compositions المتداخلة، واستخدم dotLottie للرسوم المتحركة المعقدة.

// تحسين Lottie لـ RecyclerView
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) // تحديد عدد الإطارات

تحسينات إضافية: قم بتمكين enableMergePathsForKitKatAndAbove(true) للأجهزة التي تعمل بنظام Android 4.4+ — وهذا يدمج المسارات المتداخلة في مسار واحد، مما يقلل عدد استدعاءات الرسم. استخدم dotLottie بدلاً من JSON — التنسيق الثنائي يضغط الرسوم المتحركة بنسبة 50–80% من خلال تسلسل protobuf، مما يقلل وقت التحليل. للرسوم المتحركة في RecyclerView، قم بتعيين repeatCount = 0 (تشغيل لمرة واحدة) وأوقف الرسوم المتحركة عند التمرير عبر recyclerView.addOnScrollListener. وفقاً Airbnb Engineering Blog (2025)، تقلل هذه الإجراءات حمل CPU بنسبة تصل إلى 40%.