ما هي عناصر Lottie المتحركة ولماذا يحبها المصممون؟

تحريكات Lottie هي رسوم متحركة خفيفة الحجم تعمل باستخدام ملفات JSON بدل الفيديوهات الثقيلة مثل MP4 أو GIF. يتم استخدامها بكثرة في المواقع والتطبيقات الحديثة لأنها سريعة التحميل، واضحة في جميع الأحجام، وقابلة للتفاعل.

تم تطوير Lottie في الأصل بواسطة Airbnb، والآن النظام الرسمي موجود ضمن Lottie by Design Barn ويوفر مكتبات وأدوات للعمل مع هذه التحريكات.

(أحد الأمثلة لعناصر الـ Lottie)

كيف يتم إنشاء عناصر lottie المتحركة

عادةً يبدأ إنشاء عناصر lottie المتحركة داخل Adobe After Effects حيث يقوم المصمم بإنشاء تحريكات أيقونات، واجهات، انتقالات، وعناصر UI ثم يتم تصديرها كملفات Lottie.

الطريقة الأولى — إضافة Bodymovin

إحدى الطرق الرئيسية لإنشاء ملفات Lottie هي استخدام إضافة Bodymovin في After Effects.

خطوات العمل:

1. تصميم وتحريك عناصر فيكتور داخل After Effects

2. تجنب الخصائص غير المدعومة (التأثيرات، الصور النقطية، التعبيرات المعقدة)

3. تثبيت إضافة Bodymovin

4. اختيار المشاهد

5. التصدير كملف JSON

إضافة Bodymovin للـ After effects يحول التحريك إلى بيانات يمكن للمواقع والتطبيقات تشغيلها مباشرة.

الطريقة الثانية — LottieLab

أداة LottieLab وهي أداة حديثة تعمل من المتصفح تتيح للمصممين:

• إنشاء تحريكات مباشرة عبر الويب

• تعديل ملفات Lottie

• إضافة تفاعل بدون كود

• تصدير ملفات جاهزة للاستخدام

أصبحت الأداة شائعة بين فرق UI/UX لسرعة العمل والتجربة.

أين تُستخدم تحريكات Lottie

المواقع:

• تحريكات في الهيدر

• الـ Micro-interactions أو التفاعلات البسيطة

• أيقونات متحركة

• تحريك مع التمرير

التطبيقات:

• تحريكات الترحيب

• حالات النجاح والخطأ

• مؤشرات التحميل

• تفاعل الواجهة

المنتجات الرقمية:

• الـ Empty states

• إبراز المميزات

• تحريك الأزرار

• انتقالات التنقل

  
  

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

منصة LottieFiles

منصة LottieFiles توفر:

• مكتبة ضخمة من العناصر المتحركة

• أدوات معاينة للعناصر

• إضافات لـ After Effects وFigma

• أدوات اختبار وتحسين الأداء

  
  

قيود تحريكات Lottie

رغم قوتها، هناك بعض القيود:

• ليست كل خصائص After Effects مدعومة

• التأثيرات التي تحتاج معالجة شديدة قد تسبب مشاكل

• التحريكات الكبيرة قد تؤثر على الأداء

• الـ 3D layers لا تعمل جيدًا

• دعم محدود للـ Expressions أو أكواد الجافا سكربت

لذلك Lottie مناسبة لتحريك عناصر الفيكتور أكثر من الموشن السينمائي (الذي يحتوي على التأثيرات).

لماذا تعتبر عناصر Lottie مهمة اليوم

تقوم عناصر الـ Lottie بالربط بين التصميم والتطوير، وتسمح بإنشاء تحريكات:

• خفيفة

• قابلة للتفاعل

• مناسبة للتطبيقات

• متوافقة مع المطورين

وهي من أهم تقنيات تحريك واجهات المستخدم الحديثة.