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

لماذا تضيف الرسوم المتحركة إلى تطبيقات React؟

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

ما هي مكتبة Lottie؟

مكتبة Lottie تقدّم أسلوباً مختلفاً لإنشاء الرسوم المتحركة وعرضها على الويب. بدلاً من بناء الحركة يدوياً داخل التطبيق، تعتمد هذه المكتبة على ملفات JSON يتم تصديرها غالباً من برنامج Adobe After Effects. بعد ذلك يمكن استيراد هذه الملفات وتشغيلها مباشرة داخل مشروعك.

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

كيفية الحصول على الرسوم المتحركة من LottieFiles

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

إذا كنت تريد مثلاً إضافة شعار React متحرك داخل تطبيقك، يمكنك البحث عن حركة مناسبة، ثم معاينتها وتخصيص بعض الإعدادات مثل لون الخلفية. بعد ذلك نزّل الملف بصيغة Lottie JSON.

أين تضع ملف JSON داخل مشروع React؟

يمكنك حفظ ملف الحركة في أي مجلد يناسب هيكلة مشروعك. على سبيل المثال:

• داخل مجلد static في جذر المشروع.
• داخل مجلد مخصص مثل animations ضمن src.

الأهم هو أن تعرف المسار الصحيح للملف عند استيراده لاحقاً. في هذا المثال، سنفترض أن الملف اسمه react-logo.json وتم وضعه داخل مجلد static.

تثبيت مكتبة lottie-web

بعد تجهيز ملف الحركة، تأتي خطوة تثبيت الحزمة المسؤولة عن تشغيلها، وهي lottie-web.

npm i lottie-web

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

إنشاء عنصر مخصص لعرض الحركة داخل JSX

حتى تعرض الحركة، تحتاج إلى عنصر داخل الواجهة يعمل كحاوية لها. يُفضَّل استخدام الخاصية id لأن الحركة ستُربط بعنصر واحد محدد داخل الصفحة.

// src/App.js
import React from "react";

export default function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <div id="react-logo" />
    </div>
  );
}

استيراد Lottie وملف الحركة

الخطوة التالية هي استيراد مكتبة lottie-web بالإضافة إلى ملف JSON الذي يحتوي على بيانات الحركة.

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <div id="react-logo" />
    </div>
  );
}

تشغيل الحركة باستخدام useEffect

لأننا سنتعامل مع عنصر من عناصر DOM مباشرة، فمن الأفضل تشغيل الحركة بعد اكتمال تحميل المكوّن. لهذا نستخدم الخطاف useEffect مع مصفوفة اعتماد فارغة.

داخل useEffect، نستدعي الدالة lottie.loadAnimation() ونمرّر لها كائناً يحتوي على إعدادات التشغيل. أول خاصية مهمة هي container، أي العنصر الذي ستظهر بداخله الحركة.

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  React.useEffect(() => {
    lottie.loadAnimation({
      container: document.querySelector("#react-logo"),
    });
  }, []);

  return (
    <div>
      <h1>Hello World</h1>
      <div id="react-logo" />
    </div>
  );
}

تمرير بيانات الحركة عبر animationData

بعد تحديد الحاوية، يجب تمرير ملف الحركة نفسه باستخدام الخاصية animationData. وبدون هذه الخطوة، لن تعرف المكتبة ما الذي يجب تشغيله.

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  React.useEffect(() => {
    lottie.loadAnimation({
      container: document.querySelector("#react-logo"),
      animationData: reactLogo,
    });
  }, []);

  return (
    <div>
      <h1>Hello World</h1>
      <div id="react-logo" />
    </div>
  );
}

بعد تنفيذ هذه الخطوات، يفترض أن تبدأ الحركة بالعمل تلقائياً داخل التطبيق.

ضبط حجم عنصر الحركة داخل التطبيق

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

<div id="react-logo" style={{ width: 200, height: 200 }} />

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

أهم خصائص lottie.loadAnimation()

لا تقتصر الدالة loadAnimation() على الخاصيتين container وanimationData فقط، بل توفّر إعدادات إضافية تمنحك تحكماً أفضل في شكل الحركة وسلوكها.

lottie.loadAnimation({
  container: document.querySelector("#react-logo"),
  animationData: reactLogo,
  renderer: "svg", // "canvas", "html"
  loop: true,
  autoplay: true,
});

شرح الخصائص الأساسية

• renderer: يحدد طريقة الرسم. الخيار الافتراضي هو svg، وهو الأكثر استخداماً ويدعم مزايا كثيرة. كما يمكن استخدام canvas أو html حسب الحاجة.
• loop: إذا كانت قيمته true فستتكرر الحركة باستمرار. وإذا جعلتها false فستعمل مرة واحدة فقط.
• autoplay: إذا كانت قيمته true فستبدأ الحركة تلقائياً بمجرد تحميلها. ويمكن تعطيله إذا كنت تريد تشغيلها بناءً على حدث معين أو حالة داخل التطبيق.

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

متى تستخدم الإصدار الخفيف lottie_light؟

من الأمور التي ينبغي الانتباه لها أن حزمة lottie-web قد تكون كبيرة نسبياً في بعض المشاريع، خاصة إذا كنت تهتم كثيراً بحجم الحزمة النهائية وتحسين الأداء. في هذه الحالة يمكنك استخدام النسخة الخفيفة lottie_light.

import lottie from "lottie-web/build/player/lottie_light";

هذا الخيار مناسب عندما تريد الاحتفاظ بأغلب فوائد Lottie مع تقليل الأثر على حجم الملفات المحمّلة في المتصفح.

نصائح عملية لاستخدام Lottie بكفاءة داخل React

• اختر رسوماً متحركة تخدم الهدف الوظيفي للتطبيق، لا مجرد الزينة.
• لا تفرط في استخدام الحركات داخل الصفحة الواحدة حتى لا تتأثر السرعة أو يشتت انتباه المستخدم.
• اضبط أبعاد الحاوية بدقة لتفادي تشوّه العرض.
• استخدم autoplay وloop بذكاء وفق سياق الواجهة.
• إذا كان الأداء أولوية، فاختبر النسخة الخفيفة lottie_light.

مثال نهائي متكامل لتشغيل Lottie في React

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  React.useEffect(() => {
    lottie.loadAnimation({
      container: document.querySelector("#react-logo"),
      animationData: reactLogo,
      renderer: "svg",
      loop: true,
      autoplay: true,
    });
  }, []);

  return (
    <div>
      <h1>Hello World</h1>
      <div id="react-logo" style={{ width: 200, height: 200 }} />
    </div>
  );
}

الخلاصة التقنية

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