كيفية إنشاء مكون رسوم متحركة قابل لإعادة الاستخدام لتأثير التلاشي التدريجي (Fade-in) في React باستخدام GSAP

إذا لم تكن قد سمعت عن مكتبة GSAP أو استخدمتها من قبل، فأنت تفوت الكثير! GSAP هي مكتبة رسوم متحركة قوية وموثوقة تُستخدم لإنشاء تأثيرات بصرية مذهلة للعناصر والمكونات على الويب. تُظهر صفحتها الرئيسية مجموعة واسعة من الرسوم المتحركة الرائعة التي يمكنك تحقيقها باستخدام هذه الأداة.

تتميز GSAP بمرونة عالية وتوفر العديد من خيارات التكوين، ولا توجد طريقة واحدة “صحيحة” لتحقيق نوع معين من الرسوم المتحركة. في هذا المقال، سنستعرض إحدى الطرق (المعتمدة على رأي الكاتب) لإنشاء تأثير رسوم متحركة من نوع “التلاشي التدريجي” (Fade In) عند تحميل مكون في تطبيق React. لن نتعمق في تفاصيل كيفية استخدام GSAP بشكل شامل؛ فتوثيقاتها الرسمية هي المصدر الأمثل إذا كنت تبحث عن دليل مفصل لتعلم الأداة.

ماذا سنقوم بتحريكه؟

إليك وصف موجز لما سنقوم بتحريكه:

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

لنبدأ!

تثبيت مكتبة GSAP

أولاً، يجب أن يكون لديك مشروع React جاهز. إذا كنت بحاجة إلى إعداد مشروع بسرعة لهذا الغرض، يمكنك استخدام أداة create-react-app. لتثبيت GSAP، أدخل الأمر التالي في الطرفية (مع التأكد من أن الدليل الحالي هو دليل مشروع React الخاص بك):

npm install --save gsap

إنشاء مكون رسوم متحركة قابل للاستخدام

إعداد المكون الأساسي

لنطلق على مكوننا اسم FadeInAnimation. إليك البنية الأولية للمكون:

import React, {useRef, useEffect} from 'react'

const FadeInAnimation = ( {children, wrapperElement = 'div' , direction = null , ...props} ) => {
  const Component = wrapperElement;
  const compRef = useRef( null )

  useEffect( () => {
    // animations
  }, [compRef])

  return (
    < Component ref = {compRef} { ...props }>
      {children}
    </ Component >
  )
}

export default FadeInAnimation

الرسوم المتحركة الخاصة بنا ليست جاهزة بعد، ولكن دعنا نفهم ما نبدأ به:

• wrapperElement: يُستخدم لتحديد نوع العنصر الذي سيكون المكون. قيمته الافتراضية هي div. هذا الخيار أفضل من إنشاء عقدة DOM إضافية لتغليف المكون الذي نريد تحريكه.
• useRef: نحتاج إلى هذا الخطاف (Hook) لكي تتمكن GSAP من معرفة العنصر الذي يجب تشغيل الرسوم المتحركة عليه. باستخدامه، يمكننا الإشارة إلى مكوننا في شجرة DOM.
• useEffect: بدون هذا الخطاف، ستقوم GSAP بتشغيل الرسوم المتحركة بمرجع فارغ (useRef(null)). يجب علينا التأكد من أن المكون قد تم تحميله بالفعل، ومن هنا تأتي أهمية هذا الخطاف.
• children: هذا سيمثل المحتوى الموجود بين وسمي <FadeInAnimation> و </FadeInAnimation>. يمكن أن يكون نصًا، أو حتى مجموعة من العناصر.
• ...props: لزيادة قابلية إعادة الاستخدام، هذا ضروري حتى تتمكن المكونات من تطبيق خصائص (props) أخرى مثل className و style.
• direction: للحالات التي نريد فيها إضافة اتجاه لتأثير التلاشي التدريجي. القيمة الافتراضية هي null.

الآن دعنا ننتقل إلى دمج GSAP.

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

سنقوم الآن بتعديل المكون FadeInAnimation لدمج منطق الرسوم المتحركة باستخدام GSAP:

import React, { useRef, useEffect } from "react" ;
import { gsap } from "gsap" ;

const FadeInAnimation = ( { children, wrapperElement = "div" , direction = null , delay = 0 , ...props } ) => {
  const Component = wrapperElement;
  let compRef = useRef( null );
  const distance = 200 ;
  let fadeDirection;

  switch (direction) {
    case "left" :
      fadeDirection = { x : -distance };
      break ;
    case "right" :
      fadeDirection = { x : distance };
      break ;
    case "up" :
      fadeDirection = { y : distance };
      break ;
    case "down" :
      fadeDirection = { y : -distance };
      break ;
    default :
      fadeDirection = { x : 0 };
  }

  useEffect( () => {
    gsap.from(compRef.current, 1 , { ...fadeDirection, opacity : 0 , delay });
  }, [compRef, fadeDirection, delay]);

  return (
    < Component ref = {compRef} { ...props }>
      {children}
    </ Component >
  );
};

export default FadeInAnimation;

دعنا نراجع ما حدث هنا خطوة بخطوة:

• قمنا بتهيئة متغير distance بقيمة 200. هذه القيمة مفيدة للحالات التي يتم فيها تطبيق اتجاه للحركة. يمكنك أيضًا إضافة هذه القيمة إلى خصائص الإدخال (input props) بحيث يمكن للمكون الذي يستخدمه تحديدها.
• لدينا عبارة switch case. هذه العبارة تُستخدم لتحديد اتجاه التلاشي التدريجي، مع حالة افتراضية للحالات التي لا يتم فيها تحديد اتجاه.
• ثم نستخدم كائن gsap. هذا الكائن يتم توفيره من مكتبة GSAP لتحريك مكوننا. هناك دوال مثل .to() و .from() و .fromTo() والمزيد يمكنك العثور عليها في التوثيقات.
• الدالة gsap.from() في حالتنا تشير إلى الحالة الأولية للمكون قبل الوصول إلى حالته النهائية (المحددة في ورقة أنماط المكون).
• نستهدف العنصر الحالي للمرجع (compRef.current)، ونطبق مدة ثانية واحدة للرسوم المتحركة، ثم نطبق خيارات الرسوم المتحركة.
• ...fadeDirection: نقوم بنشر الكائن بحيث يظهر هناك كـ {x: 200} أو حسب التحديد. x للحركة الأفقية و y للحركة العمودية.
• ثم، نحدد شفافية أولية opacity بقيمة 0 وتأخير delay حسب ما يحدده المكون.

وهذا كل شيء! دعنا الآن ننشئ مكونًا يستخدم هذه الرسوم المتحركة الرائعة.

كيفية استخدام مكون التلاشي التدريجي القابل لإعادة الاستخدام

توجه إلى المكون الذي تريد تحريكه وقم بتطبيق شيء مشابه لما يلي:

import React from "react" ;
import FadeInAnimation from "./FadeInAnimation" ;

export default function App ( ) {
  return (
    < div >
      < FadeInAnimation wrapperElement = "h1" direction = "down" > Hello CodeSandbox </ FadeInAnimation >
      < FadeInAnimation wrapperElement = "h2" direction = "right" delay = {2} > Start editing to see some magic happen! </ FadeInAnimation >
      < FadeInAnimation style = {{ width: 200 , color: " white ", height: 200 , backgroundColor: " purple " }} direction = 'up' >
        < p > Hello </ p >
      </ FadeInAnimation >
    </ div >
  );
}

كما رأينا أعلاه، يمكن لمكون FadeInAnimation الخاص بنا قبول خاصية style. تذكر أننا استخدمنا ...props، وهذا يسمح بتمرير أي خصائص إضافية (مثل style أو className) إلى العنصر المغلف. إليك النتيجة في CodeSandbox (إذا كان هناك رابط أو صورة، يمكن إضافتها هنا).

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

لقد استعرضنا في هذا المقال طريقة عملية وفعالة لإنشاء مكون FadeInAnimation قابل لإعادة الاستخدام في React بالاعتماد على قوة مكتبة GSAP. هذا النهج لا يقتصر على توفير تأثيرات بصرية جذابة فحسب، بل يعزز أيضًا مبدأ “عدم تكرار نفسك” (DRY) في تطوير الواجهة الأمامية. من خلال استخدام خطافات useRef و useEffect، نضمن تفاعلاً سلسًا بين دورة حياة المكون ومنطق الرسوم المتحركة، مما يتيح التحكم الدقيق في توقيت وتطبيق التأثيرات. المرونة التي يوفرها تحديد wrapperElement و direction و delay تجعل هذا المكون أداة قيمة لأي مطور React يسعى لإضافة لمسة احترافية وديناميكية لتطبيقاته دون الحاجة إلى كتابة أكواد رسوم متحركة معقدة لكل عنصر على حدة. يمكن توسيع هذا المفهوم ليشمل أنواعًا أخرى من الرسوم المتحركة، مما يفتح الباب لإمكانيات تصميم لا حصر لها.