ممارسة استخدام مكتبة lottie في تطبيق البنك المحمول

مرحبا يا هبر!

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


كانت المهمة واضحة: أراد المصمم الرسم بشكل جميل ، لإعطاء الكود المصدري لكليهما
منصات دون dopilivaniya من جانبه ، وحتى لا يتخلف عن الأجهزة القديمة (نعم ، ما زلنا ندعم android 4.1).

ما خياراتي لتقديم الرسوم المتحركة:

1. أقلام باستخدام ناقل متحرك قابل للسحب. الشيء الجيد هو أن التقديم يعمل
   في خيط منفصل (يبدأ بـ api 25) ، السلبيات هي تعقيد إنشاء مثل هذه الرسوم المتحركة وعدد صغير من التلاعب بالأشياء. بالنسبة للرسوم المتحركة البسيطة ، كل هذا يعمل بشكل جيد ، ولكن قليلاً أكثر تعقيدًا ، ويبدأ الجحيم. نعم ، وعلى منصات مختلفة لن تبدأ.
2. GIF - يزنون كثيرًا ، ولهم حجم ثابت ، مما يعني أنهم لا يتقاسمون بشكل طبيعي. ولن تقوم بأي تلاعب خاص بها.
3. بابوا نيو غينيا تسلسل (لا تعليق).

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

بعد بعض الاختبارات باستخدام أجهزة مختلفة ، قررنا أن يتم تنفيذ المكتبة ، خاصة وأن قدراتها كانت رائعة. كان المصمم سعيدًا بشكل خاص ، حيث يمكنه الآن القيام بأي رسوم متحركة تقريبًا في Adobe After Effects ، والتصدير إلى ملف json ببضع نقرات. كنا سعداء للغاية ، ولكن أول الأشياء أولاً.

تم اختراع Lottie وتطبيقه من قِبل Airbnb استجابةً للطلب المتزايد على الرسوم المتحركة عبر الأنظمة الأساسية ، بحيث تعمل على قدم المساواة (جيدًا ، تقريبًا) على جميع المنصات. يدعي المطورون أنفسهم أن هدفهم هو تحقيق الحد الأقصى لعدد ميزات After Effects ، وقد نجحوا في ذلك. أصبح الآن تضمين Lottie للرسوم المتحركة سهلاً مثل إدراج صورة في ImageView.

فئات 3 الرئيسية:

1. LottieAnimationView هو خليفة ImageView ، وأسهل طريقة لاستخدام الرسوم المتحركة. يمكنك وصف الرسوم المتحركة بتنسيق xml ، أو يمكنك في الكود ، دعم معظم الطرق.
2. LottieDrawable - يسمح لك السليل القابل للدرجات ، مع نفس الوظيفة مثل الفئة السابقة ، بتطبيق الرسوم المتحركة على أي طريقة عرض.
3. تتيح لك LottieComposition ورفيقها LottieCompositionFactory إمكانية تحميل الرسوم المتحركة مسبقًا من مصادر مختلفة والتقدم إلى LottieDrawable و LottieAnimationView.

تحميل الموارد

يدعم تحميل الموارد من:

1. الدقة / الخام
2. src / الأصول
3. سلسلة Json
4. أي عنوان url من الشبكة يؤدي إلى ملف json أو zip (يتم تنفيذه عبر HttpURLConnection ، حتى لا تضيف تبعيات خارجية. إذا كان لديك رسوم متحركة مع الصور ، فأنت بحاجة إلى استخدام zip)
5. InputStream json أو ملف مضغوط

التخزين المؤقت للرسوم المتحركة

الطريف هو أن جميع الرسوم المتحركة التي تم تنزيلها عبر res / raw أو الأصول يتم حفظها بواسطة ذاكرة التخزين المؤقت LRU ، مما يسمح لنا بعدم إضاعة وقت المستخدم في إعادة تحميل الرسوم المتحركة وتحليلها ، كما في حالة الرسوم المتحركة المعقدة قد يستغرق الأمر بعض الوقت. ما هو أكثر برودة ، إذا كنت بحاجة إلى تحميل الرسوم المتحركة مسبقًا ، ثم في الجزء التالي عرض الرسوم المتحركة على الفور ، يمكنك استخدام الرمز

LottieCompositionFactory.fromRawRes(context, rawFile) 

يتم التخزين المؤقت للرسوم المتحركة باستخدام مفتاح rawFile ، وحيث تحتاج حقًا إلى استخدامه ، يبدأ على الفور تقريبًا.

إدارة التقدم

يسمح لك Lottie بتعيين حالة الرسوم المتحركة الحالية من خلال setProgress (...). يمكن أن يكون هذا مفيدًا إذا كنت تريد تنشيط حالة تحميل الملف ، وموضع التمرير ، والإيماءات المختلفة ، إلخ. رأيت العديد من التطبيقات على BottomSheets و PullToRefresh و CollapsingToolbarLayout.

إليك كيفية استخدام التقدم مع AppBarLayout:

 appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset -> val percent = Math.abs(verticalOffset).toFloat()/appBarLayout.totalScrollRange animationView.progress = percent }) 

حلقات

يدعم Lottie حلقات setRepeatMode () أو setRepeatCount () ليس فقط الرسوم المتحركة بأكملها ، ولكن أيضًا أي جزء داخل (0.0 ... 1.0). يتم تطبيق هذا بواسطة خصائص setMinFrame و setMaxFrame و setMinAndMaxFrame. استخدمنا هذا حتى لا ننفذ 3 رسوم متحركة لحالات تحميل الملفات المختلفة: الخمول ، التقدم ، مكتمل. إليك قطعة صغيرة من التعليمات البرمجية التي تحل هذا:

 when (loadingStatus) { LoadingStatus.IDLE -> { animationView.setMaxProgress(0.1f) } LoadingStatus.PROGRESS -> { animationView.setMinAndMaxProgress(0.2f, 0.9f) animationView.repeatCount = LottieDrawable.INFINITE animationView.playAnimation() } LoadingStatus.COMPLETE -> { animationView.setMinAndMaxProgress(0.9f, 1f) animationView.repeatCount = 1 animationView.playAnimation() }} 

الصور

واحدة من أهم مزايا Lottie بالنسبة لنا هي أن المكتبة تدعم إدراج الصور مباشرة في الرسوم المتحركة. علاوة على ذلك ، يمكنك إدراج صورة ثابتة وصورة ديناميكية تم تنزيلها من الإنترنت. الآن سوف أشرح كيف يعمل.

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

 { "v": "5.1.13", "fr": 29.9700012207031, "ip": 0, "op": 47.0000019143492, "w": 1034, "h": 1334, "nm": " 1", "ddd": 0, "assets": [ { "id": "image_0", "w": 130, "h": 436, "u": "images/", "p": "img_0.png" }, { "id": "comp_0", "layers": [ ... ]}] } 

هذا img_0.png ، هذه هي الصورة التي يجب عليك وضعها في src / الأصول ، والتي ستكون داخل الرسوم المتحركة.

للتحميل الديناميكي ، يتم استخدام طريقة setImageAssetDelegate ، والتي يجب عليك تمرير الصورة النقطية إليها. نقوم بتحميل الصورة مسبقًا مع Glide ، لذلك في مرحلة فتح جزء من الرسوم المتحركة والصور ، كل شيء يخرج من ذاكرة التخزين المؤقت ، لذلك كل شيء سريع للغاية. هنا هو الكود:

 glideLoader.loadAsBitmap(imageUrl).into(object: CustomTarget<Bitmap>() { override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) { viewAnimation.setImageAssetDelegate(object: ImageAssetDelegate { override fun fetchBitmap(asset: LottieImageAsset?): Bitmap { asset?.let { val resizeBitmap =Bitmap.createScaledBitmap(resource, it.width, it.height, true); return resizeBitmap } ?: run { return resource } } }) setAnimation(viewAnimation, animationImage) } override fun onLoadCleared(placeholder: Drawable?) {} }) 

إنتاجية

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

إذا تباطأت الرسوم المتحركة على بعض الأجهزة ، فستساعد في بعض الأحيان

 viewAnimation.useHardwareAcceleration(true) 

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

استنتاج

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

المزايا الرئيسية لوتي التي أبرزناها:

1. مكتبة صغيرة الحجم (300 كيلو بايت)
2. حل عبر النظام الأساسي ios / android / web
3. قم بتنزيل الرسوم المتحركة من الويب
4. إدارة التقدم وحلقات في أي مكان
5. يسمح عدد كبير من الميزات من بعد التأثيرات للمصمم بإدراك التأثير المقصود.

سلبيات:

1. يتم التقديم في الخيط الرئيسي ، ويمكن أن ينخفض ​​إطار في الثانية بشكل ملحوظ في التطبيق.
2. تحليل الرسوم المتحركة لوتي يمكن أن يستغرق وقتا طويلا مع الرسوم المتحركة المعقدة.

بالمناسبة ، للتحقق من حجم الرسوم المتحركة كثيفة الاستخدام للموارد ، يمكنك استخدام تطبيق Lottie الرسمي من Google Play . يوجد Render Graph حيث يمكنك رؤية وقت تقديم الإطار ، وكذلك انظر كيف ستبدو الرسوم المتحركة إذا قمت بتقطيعها إلى إطارات ، أو كيف ستؤثر مكونات الأجهزة وغيرها الكثير.