مقدمة إلى تصميم الحركة باستخدام إطار لوتي Lottie

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

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

يعد إطار لوتي Lottie واحد من أشهر الإطارات التكنولوجية لتسهيل دعم الرسوم المتحركة في التطبيقات الأصلية Native Apps أو الويب عموماً.

ماهو؟

في الجوهر، لوتي هو إطار برمجي معاصر يسمح للمصممين تصدير رسومهم المتحركة المصممة عبر Adobe After Effects إلى ملفات JSON يمكن استخدامها داخل النصوص البرمجية للتطبيقات و المواقع بما يجعل الحركة أكثر سلاسة و اندماجاً مع التطبيق من مجرد استخدام صورة متحركة (كـ GIF أو ملفات ڤيديو مثلاً). تصميم الحركة باستخدام الكود فقط عملية مضنية تستهلك الكثير من الوقت وتصبح معقدة جداً بمجرد ازياد تعقيد المادة المتحركة نفسها.

تم تصميم إطار لوتي من قبل صالح عبد الكريم أثناء عمله كمدير تصميم حركة في Airbnb وتمت إتاحته بشكل مفتوح المصدر لعموم المصممين.

كيف يعمل إطار لوتي؟

ينطلق تصميم الملفات الحركة على لوتي من تطبيق After Effects. يمكن للمصمم تصميم الحركة المطلوبة ثم يقوم بتصديرها إلى ملف JSON عبر إضافة مجانية تحمل اسم BodyMovin.

ماذا لو لم يكن لدي خبرة أو اهتمام بـ After Effects؟

من المفيد معرفة أن لـلوتي مجتمع جيد وكمية ممتازة من الرسوم المتحركة المجانية (أو المتاحة بحقوق إعادة استخدام) يمكن تحميلها و استخدامها في مواقعنا أو تطبيقاتنا مباشرة. يمكن أيضاً شراء بعض الرسوم المتحركة الجاهزة من متجر لوتي.

نموذج دمج ملفات لوتي على الويب

See the Pen
abpVeGv
by Saleh (@mskayyali)
on CodePen.

كما نلاحظ و على الويب في هذا المثال. يقوم سكربت خاص بتشغيل ملفات لوتي lottie-player.js بالتعرف على ملفات JSON المتحركة و التي تم تصديرها عبر الإضافة (واستضافتها على منصة لوتي نفسها). هناك طبعاً طرق أخرى أكثر أصالة لدمج ملفات لوتي على الويب لكن تم استخدام هذا المثال على CodePen لإيضاح سهولة التعامل مع ملفات لوتي نفسها.

https://assets6.lottiefiles.com/packages/lf20_2v2beqrh.json

وفي الكود نفسه ماعلينا إلا تغيير ملف الـ JSON بملف لوتي متحرك JSON آخر.

من الكود نلاحظ أيضاً أن لوتي تتيح بعض عناصر التحكم مثل السرعة Speed و ما إذا كان إعادة الحركة من البداية ممكنا أم لا.

يمكننا طبعاً أيضاً أن نقوم بنفس العملية على iOS و آندرويد وفقاً للتعليمات البرمجية الخاصة بكل منصة. يمكن الاطلاع على النماذج و المكتبات من مشروع لوتي على موقع Airbnb الرسمي.

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

الصورة من مدونة Nitish Prasad

شاركنا بتعليقك