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

مرحباً. أنا zm soft، الذي سجّل في برنامج المطورين في العام الماضي (نهاية عام 2023) وبدأ في إصدار التطبيقات. كما نخطط لإصدار تطبيق مخصص للمطورين، لذا يُرجى الاطلاع عليه إذا أردت.

هل تستخدمون عرض الرسوم المتحركة داخل تطبيقاتكم؟ مجرد وجود قليل من الحركة يجعل التطبيق أكثر وضوحاً وجاذبية من الناحية البصرية، أليس كذلك؟ لذا، اليوم أريد أن أكتب عن كيفية عرض الرسوم المتحركة في تطبيقات Android.

LottieAnimation

المكتبة التي أستخدمها هي LottieAnimation، وهي مكتبة لعرض الرسوم المتحركة. أستخدمها لأنها تتيح عرض رسوم متحركة خفيفة بسهولة نسبية.

أنواع الرسوم المتحركة المتاحة

أولاً، من أبرز مزايا هذه المكتبة ثروتها من الرسوم المتحركة المجانية. على سبيل المثال، تتوفر رسوم متحركة من هذا النوع.

تُنشر هذه الرسوم المتحركة على الموقع الرسمي لـLottieFiles. هناك العديد من الرسوم المتحركة المدفوعة أيضاً، لكن ما يظهر عند تصفية البحث على المجاني وحده كافٍ للاستخدام. بشكل أساسي، بما أنني لا أمتلك المهارة ولا الطاقة لإنشاء رسوم متحركة من الصفر، فإنني عند الرغبة في إضافة حركة، أفكر أولاً في البحث عن شيء قابل للاستخدام في هذا الموقع. على سبيل المثال، باستخدام رسوم متحركة كهذه، يمكن إرشاد المستخدم إلى مواضع النقر الشائعة عند العرض لأول مرة. لقد استخدمت فعلياً الرسم المتحرك الموجود على اليمين لتوجيه المستخدم في كيفية التشغيل.

نقطة القوة: السهولة

يمكن التعامل مع التنفيذ بشكل بسيط جداً. على سبيل المثال، إذا أردت فقط عرض رسم متحرك في تخطيط محدد، يكفي تعريفه بالشكل التالي ليعمل. أليس رائعاً أن يعمل دون الحاجة لتنفيذ أي منطق برمجي؟

طريقة التنفيذ البسيطة لـ Lottie

تنفيذ Lottie بسيط للغاية. يكفي تضمين الرسم المتحرك في تخطيط معين ليعمل دون الحاجة لأي منطق إضافي.

مثال تنفيذي:

   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_id"
        app:lottie_rawRes="@raw/your_lottie_animation"/>

الاستخدام الأساسي لـ Lottie

فيما يلي الخطوات الرئيسية لاستخدام Lottie:

• تضمين المكتبة (تعديل build.gradle)
• الحصول على ملف الرسوم المتحركة وتعيين مكانه
• إعداد ملف التخطيط
• تخصيص الرسوم المتحركة

أمثلة تنفيذية محددة وكود

فيما يلي أمثلة تنفيذية محددة عند استخدام Lottie. تشمل طريقة تضمين المكتبة، وتعيين ملف الرسوم المتحركة، وإعداد ملف التخطيط، إضافةً إلى تخصيص الرسوم المتحركة.

الإضافة إلى build.gradle / تضمين المكتبة:
أولاً، قم بتضمين المكتبة لتتمكن من استخدام Lottie.
إذا لم تكن هناك مشاكل في التوافق، يُرجى استخدام أحدث إصدار.

dependencies {
    implementation 'com.airbnb.android:lottie:3.4.0'
}

تعيين ملف الرسوم المتحركة:
قم بتنزيل ملف الرسوم المتحركة المفضل (.json) من الموقع الرسمي لـLottieFiles وضعه في مجلد res/raw بالتطبيق.

إعداد ملف التخطيط:
أضف LottieAnimationView إلى تخطيط XML بحيث يمكنه الإشارة إلى ملف الرسوم المتحركة الذي تم تنزيله.

تخصيص الرسوم المتحركة:
يمكنك تخصيص سلوك الرسوم المتحركة حسب الحاجة. تشمل إعدادات الرسوم المتحركة ما يلي:

• تشغيل حلقي أو بدونها
• تحديد عدد التكرارات
• تحديد سرعة التشغيل (بما في ذلك التشغيل العكسي)

بإضافة معالجة ديناميكية، يمكنك التشغيل/الإيقاف في الوقت المناسب وتغيير سرعة التشغيل.

فيما يلي أولاً طريقة التحديد الثابت. يتغير سلوك الرسوم المتحركة بحسب التحديدات التالية.

   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_id"
        android:scaleType="centerCrop"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_speed="0.15"
        app:lottie_rawRes="@raw/your_lottie_animation"/>

في هذا المثال، يتم تشغيل ملف your_lottie_animation.json تلقائياً بسرعة تشغيل 0.15x مع التكرار.

بعد ذلك، المعالجة الديناميكية:

lottieAnimationView.playAnimation()

يمكن التشغيل بالمعالجة المذكورة أعلاه. بالإضافة إلى التشغيل، يمكنك تغيير الإعدادات للإيقاف وتغيير السرعة وما إلى ذلك. يمكنك أيضاً ضبط مستمع كما يلي والكشف عن انتهاء التشغيل للمعالجة:

        lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
                // アニメーション開始時の処理
            }

            override fun onAnimationEnd(animation: Animator) {
                // アニメーション終了時の処理
            }

            override fun onAnimationCancel(animation: Animator) {
                // アニメーションがキャンセルされた時の処理
            }

            override fun onAnimationRepeat(animation: Animator) {
                // アニメーションがリピートされる時の処理
            }
        })

نقاط الانتباه واستكشاف الأخطاء وإصلاحها

Lottie مفيد للغاية، لكن هناك بعض نقاط الانتباه. على وجه الخصوص، قد لا يعمل تغيير موضع الكائنات كما هو متوقع. كما سأشرح مشكلة تجاوز سعة المكدس المتعلقة بمعالجة نهاية الرسوم المتحركة، وكذلك السلوك بعد onPause.

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

        lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
                // アニメーション開始時の処理
            }

            override fun onAnimationEnd(animation: Animator) {
                // アニメーション終了時の処理
                lottieAnimationView.speed = lottieAnimationView.speed*(-1) // 逆再生のためにスピードを逆にする
                lottieAnimationView.post {
                    // 直接呼ぶと再起呼び出しでスタックオーバーフローするのでPOSTする
                    if(isAttachedToWindow) {
                        lottieAnimationView.playAnimation()
                    }
                }
            }

            override fun onAnimationCancel(animation: Animator) {
                // アニメーションがキャンセルされた時の処理
            }

            override fun onAnimationRepeat(animation: Animator) {
                // アニメーションがリピートされる時の処理
            }
        })

مثال استكشاف الأخطاء 2:
نقطة أخرى يجب الانتباه إليها هي المعالجة بعد onPause. يجب إيقاف الرسوم المتحركة في الخلفية لتجنب الأعمال غير الضرورية.

    override fun onResume(owner: LifecycleOwner) {
        super.onResume(owner)
        // アニメーションを開始
        lottieAnimationView.playAnimation()
    }

    override fun onPause(owner: LifecycleOwner) {
        lottieAnimationView.cancelAnimation()
        super.onPause(owner)
    }

ومع ذلك، إذا كانت هناك معالجة عند انتهاء الرسوم المتحركة وغيره، فإن هذا وحده لم يكن كافياً. لذا كان من الضروري التحقق مما إذا كان العرض الأصلي لا يزال متصلاً وإعادة المعالجة:

                    if(isAttachedToWindow) {
                        binding.lottieBackground.playAnimation()
                    }

خلاصة

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