كيفية إنشاء مكوِّن رسوم متحركة قابل لإعادة الاستخدام في React باستخدام GSAP

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

يحتوي GSAP على الكثير من التكوينات ، ولا توجد طريقة واحدة صحيحة لتحقيق نوع واحد من الرسوم المتحركة. لذلك سننظر في طريقة واحدة (برأي) لإنشاء الرسوم المتحركة "Fade In" عند تحميل أحد المكونات.

لن تتناول هذه المقالة التفاصيل حول كيفية استخدام GSAP. وثائقهم هي مصدر الانتقال إذا كنت تريد دليلًا متعمقًا لتعلم الأداة.

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

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

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

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

هيا بنا نبدأ!

تركيب GSAP

أولاً ، يجب أن يكون لديك مشروع رد فعل تم إعداده. يتوفر تطبيق create-رد فعل لك إذا كنت بحاجة إلى إعداد واحد سريعًا لهذا المشروع.

لتثبيت GSAP ، أدخل الأمر التالي في الجهاز الطرفي (مع كون الدليل الحالي هو دليل مشروع رد الفعل):

npm install --save gsap 

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

إعداد المكون

دعنا نسمي مكوننا FadeIn:

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 (  {children}  ) } export default FadeInAnimation 

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

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

الآن دعنا نتوجه إلى 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 (  {children}  ); }; export default FadeInAnimation; 

لنستعرض ما حدث هنا:

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

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

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

توجه إلى المكون الذي تريد تحريكه وافعل شيئًا مشابهًا لما يلي:

import React from "react"; import FadeInAnimation from "./FadeInAnimation"; export default function App() { return ( Hello CodeSandbox   Start editing to see some magic happen!   

Hello

); }

كما رأينا أعلاه ، FadeInAnimationيمكن أن يقبل المكون الخاص بنا styleدعامة. تذكر أننا فعلنا ...props.

ها هي النتيجة في CodeSandBox

يتم إحتوائه

هذا هو التفاف. هذا استخدام بسيط (عنيد) لـ GSAP لتأثيرات الخبو.

بالطبع ، يمكنك تكوينه بشكل أكبر ، مثل إحداث تأثير ارتداد يتلاشى ، وتدوير التلاشي ، وأشياء ممتعة أخرى. ولكن آمل أن يكون هذا المقال قد أعطاك مقدمة موجزة وموجزة عن مدى روعة GSAP وكيفية البدء في القيام بأشياء مذهلة على الويب.

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