كيفية إنشاء الرسوم المتحركة للدخول والخروج لمكون رد الفعل باستخدام Framer Motion

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

يمكنك حل هذه المشكلة باستخدام مكتبة رسوم متحركة مثل Framer Motion.

ما هي حركة فرامير؟

Framer Motion هي مكتبة رسوم متحركة جاهزة للإنتاج لـ React. يوفر مجموعة من المكونات والخطافات وإطارات المفاتيح ووظائف التخفيف المخصصة لإنشاء الرسوم المتحركة والتحكم فيها.

تتمثل إحدى ميزات Framer Motion في أنها تجعل من السهل إنشاء رسوم متحركة سلسة وسلسة دون الحاجة إلى كتابة الكثير من تعليمات JavaScript البرمجية أو معرفة العمليات الحسابية لكل انتقال.

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

لتوضيح كيفية استخدام Framer Motion في React ، ستقوم بتحريك مكون يدخل إلى الشاشة ويغادرها عند النقر فوق الزر.

إنشاء مشروع React

لإنشاء مشروع React ، ستحتاج إلى قم بتثبيت Node.js و npm (مدير حزمة Node) على جهازك إذا لم تفعل.

بمجرد تثبيت هذه التبعيات ، يمكنك ذلك إنشاء مشروع React جديد باستخدام Vite من خلال تشغيل أمر yarn vite في جهازك.

غزل vite

سينشئ هذا الأمر مجلدًا جديدًا مع تثبيت جميع الملفات الضرورية والتبعيات مسبقًا. انتقل إلى المجلد وابدأ خادم التطوير باستخدام الأمر yarn start.

بداية الغزل

تثبيت Framer Motion في React

قم بتثبيت Framer Motion عن طريق تشغيل هذا الأمر:

npm تثبيت فرامير الحركة

سيضيف هذا الأمر Framer Motion باعتباره تبعية لمشروعك.

تحريك المكوِّن

لتحريك أحد المكونات أثناء دخوله وخروجه من الشاشة في React باستخدام Framer Motion ، تحتاج إلى لفه في مكون الحركة.

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

لرؤيتها أثناء العمل ، أضف الكود التالي في الجزء العلوي من App.jsx لاستيراد مكون الحركة من Framer-motion.

يستورد { حركة } من"مؤطر الحركة";

بعد ذلك ، قم بإنشاء المكون الذي تريد تحريكه عن طريق لفه بمكون الحركة. يستخدم هذا المثال عنصر div ولكن يمكنك استخدام أي عنصر آخر تريده مثل button و li و p من بين عناصر أخرى.

يستورد {حركة ، AnimatePresence} من"مؤطر الحركة"
وظيفةبرنامج() {
يعود (
 <>

 الأولي = {{ x: -100, العتامة: 0 }}
 تحريك = {{ x: 0, العتامة: 1 }}
 خروج = {{ x: -100, العتامة: 0 }}
 >
مرسل!/p>
 </motion.div>

 </>
 )
}

يسمح لك مكون الحركة بتحريك عنصر div الذي يحتوي على النص "مرسل!".

ال أولي, تحريك، و مخرج تحدد خصائص مكون الحركة الرسوم المتحركة لدخول وخروج المكون. عندما يتم تقديم المكون في البداية ، سيبدأ مع موضع x من -100 (خارج الشاشة إلى اليسار) وشفافية بقيمة 0 ويصبح غير مرئي.

تحدد خاصية animate كيف يجب أن يتحرك المكون عند دخوله إلى الشاشة ، وفي هذه الحالة يتحرك من x الموضع من -100 إلى الموضع x من 0 (الانزلاق للداخل من اليسار) ويتلاشى تدريجيًا إلى عتامة 1 ويصبح بالكامل مرئي.

أخيرًا ، تحدد خاصية exit كيف يجب أن يتحرك المكون عند إزالته من الشاشة. في هذه الحالة ، سينزلق المكون من الشاشة إلى اليسار مع وضع x عند -100 ويتلاشى تدريجيًا إلى عتامة 0.

تحتاج أيضًا إلى لف مكون الحركة بمكون AnimatePresence من حركة الإطارات لتحريك المكونات عند إزالتها من شجرة React DOM.

الآن بعد أن حددت الرسوم المتحركة للمدخل والخروج ، يمكنك إضافة زر لتشغيل الرسوم المتحركة. ها هو المكون المعدل بالزر:

يستورد {AnimatePresence، motion} من"مؤطر الحركة";
يستورد {useState} من"تتفاعل";
وظيفةبرنامج() {
مقدار ثابت [isVisible، setIsVisible] = useState (حقيقي);
مقدار ثابت toggleVisibility = () => {
 setIsVisible (! isVisible) ؛
 };
يعود (
 <>

 {مرئي && ( <الحركة
 الأولي = {{ x: -100, العتامة: 0 }}
 تحريك = {{ x: 0, العتامة: 1 }}
 خروج = {{ x: -100, العتامة: 0 }}
 >
مرسل!/p>
 </motion.div>)}
 </AnimatePresence>

 يخطر
 </button>
 </>
 )
}

يضيف هذا الرمز المحدث متغير حالة يسمى isVisible باستخدام الخطاف useState. يتتبع هذا المتغير ما إذا كان يجب أن يكون المكون مرئيًا. تقوم وظيفة toggleVisibility بتبديل قيمة isVisible بين true و false عند النقر فوق الزر.

انت الآن جعل المكون مشروطًا حسب قيمة isVisible. إذا كانت قيمة isVisible هي true ، فسيتم عرض مكون الحركة مع الرسوم المتحركة للمدخل.

أخيرًا ، أضف معالج حدث onClick إلى الزر الذي يستدعي وظيفة toggleVisibility ، ويحدّث حالة isVisible ، ويطلق حركة الدخول أو الخروج لمكون الحركة.

إضافة وظيفة التيسير

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

يوفر Framer Motion العديد من وظائف التسهيل للاختيار من بينها ، بما في ذلك easyInOut. قم باستيراده في الجزء العلوي من App.jsx من Framer-motion لاستخدامه.

يستورد {الحركة ، easyInOut} من"مؤطر الحركة";

ثم أضفه إلى كائن الانتقال في مكون الحركة:

 الأولي = {{ x: -100, العتامة: 0 }}
 تحريك = {{ x: 0, العتامة: 1, انتقال: { مدة: 0.5, يُسَهّل: easyInOut}}}
 خروج = {{ x: -100, العتامة: 0, انتقال: { مدة: 0.5, يُسَهّل: easyInOut}}}
>
مرسل!/p>
</motion.div>

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

استخدم Plain CSS للرسوم المتحركة البسيطة

هناك الكثير الذي يمكنك القيام به باستخدام Framer Motion بما في ذلك الرسوم المتحركة ثلاثية الأبعاد. ومع ذلك ، لا تحتاج دائمًا إلى مكتبة لإنشاء رسوم متحركة. بالنسبة إلى الرسوم المتحركة البسيطة مثل انتقالات التمرير ، يمكنك دائمًا استخدام CSS عادي.