ما هي LottieFiles؟
LottieFiles منصة قائمة حول Lottie، وهي صيغة مفتوحة للرسوم المتحركة مبنية على JSON، أي صيغة نصية بسيطة لحفظ البيانات. تصف Lottie الحركة بأشكال متجهية وتحولاتها بدلًا من الإطارات المتتالية، فتبقى حادة بأي حجم، وتكون عادة أخف بكثير من ملف GIF أو فيديو للحركة نفسها. وقد نشأت الصيغة من إضافة Bodymovin لبرنامج After Effects، ثم أصدر فريق Airbnb عام 2017 أولى مكتبات Lottie لتشغيل هذه الرسوم على iOS وAndroid.
تأسست LottieFiles عام 2018 مجتمعًا لتبادل رسوم Lottie المتحركة، ثم تحولت إلى مجموعة من الأدوات حول الصيغة: مكتبة من الرسوم الجاهزة، وإضافات للتصدير من After Effects وFigma، وLottie Creator للتحريك مباشرة في المتصفح، ومشغّل ويب مفتوح المصدر، وأدوات للمعاينة والتخفيف والتحويل. كما طوّرت صيغة dotLottie (.lottie) المفتوحة، التي تجمع رسمًا متحركًا أو أكثر مع صوره وخطوطه في ملف واحد مضغوط.
ويمكن لملف dotLottie أن يحمل سمات (themes)، كنسختين فاتحة وداكنة للرسم نفسه، وآلات حالة (state machines) تجعله يستجيب لمرور المؤشر والنقر دون شيفرة إضافية. ومنذ عام 2024 أصبح لـ Lottie مواصفة مفتوحة تصدرها مجموعة Lottie Animation Community. ويمكن استخدام LottieFiles مجانًا لمعاينة الرسوم واختبارها ومشاركتها، مع خطط مدفوعة للأفراد والفرق.
أين نستخدم LottieFiles
خيارنا الأول للرسوم المتجهية المتحركة الصغيرة في المواقع هو Lottie، ومع LottieFiles نجهّزها من أجل:
أيقونات متحركة
أيقونات تستجيب عند مرور المؤشر فوقها أو تؤكد إجراءً ما، مثل أيقونة قائمة تتحول إلى زر إغلاق، أو علامة صح تظهر بعد إرسال النموذج. ملفاتها صغيرة جدًا وتبقى حادة على كل شاشة.
شاشات التحميل ورسائل الحالة
تبدو مؤشرات التحميل والصفحات الفارغة ورسائل النجاح أو الخطأ ألطف مع قليل من الحركة. نجعلها قصيرة وهادئة، فتُعلم الزائر دون أن تعترض طريقه.
الرسوم التوضيحية وشاشات التعريف
تنبض الرسوم التوضيحية بأسلوب العلامة بالحياة في صفحات الهبوط، وتشرح الشاشات المتتابعة منتجًا ما أو الاستخدام الأول لتطبيق. وتُبقيها Lottie خفيفة بما يكفي لتُحمَّل بسرعة على الهواتف.
حركة العلامة في الموقع
يمكن لحركة الشعار التي نصممها في After Effects أن تعمل أيضًا في رأس الموقع أو شاشته الافتتاحية بصيغة Lottie، فتتحرك العلامة بالطريقة نفسها في الفيديو وعلى الويب.
لماذا LottieFiles؟
خفيفة وحادة
تتكيف الرسوم المتجهية مع أي شاشة دون أن تفقد حدّتها، وهي عادة أصغر بكثير من ملف GIF أو فيديو للحركة نفسها، فتُحمَّل الصفحات أسرع.
تحكم عبر الشيفرة
يمكننا في الموقع تشغيل الحركة وإيقافها وتكرارها، أو ربطها بالتمرير ومرور المؤشر، ومع سمات dotLottie تتبع الحركة الوضعين الفاتح والداكن للموقع.
من التصميم إلى الشيفرة بخطوة واحدة
تصدّر إضافات After Effects وFigma مباشرة إلى Lottie، ويتيح لك رابط معاينة مشترك مراجعة الحركة على هاتفك قبل إضافتها إلى الموقع.
كيف نعمل على مشروعك
نصمم الحركة في After Effects، والأبسط منها في Lottie Creator، مستخدمين فقط الميزات التي تدعمها صيغة Lottie. ثم نصدّرها بإضافة LottieFiles، ونعاينها على الحاسوب والهاتف، ونرسل إليك رابطًا لتراجعها قبل إضافتها إلى الموقع.
قبل الإطلاق نخفف كل ملف، ونختار بين JSON وdotLottie الأصغر حجمًا، ولا نحمّل الرسوم إلا عند ظهورها على الشاشة. ويرى الزوار الذين فعّلوا خيار «تقليل الحركة» إطارًا ثابتًا بدلًا منها، ونقيس سرعة الصفحة عبر PageSpeed Insights وLighthouse.
