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

تعد الرسوم المتحركة جزءًا مهمًا من كل تطبيق ويب حديث تقريبًا. إنها أيضًا واحدة من أصعب الأجزاء التي يصعب تصحيحها.

Framer Motion هي مكتبة صُممت لـ React والتي تجعل من السهل تحريك المكونات.

كيف يعمل Framer Motion

يستخدم Framer Motion مكون الحركة للرسوم المتحركة. يحتوي كل عنصر HTML / SVG على مكون حركة مكافئ له دعائم للإيماءات والرسوم المتحركة. على سبيل المثال ، يبدو عنصر div العادي بتنسيق HTML كما يلي:

<شعبة>شعبة>

بينما يبدو مكافئ Framer Motion كما يلي:

<الحركة>الحركة>

تدعم مكونات الحركة تحريك prop الذي يقوم بتشغيل الرسوم المتحركة عندما تتغير قيمها. بالنسبة إلى الرسوم المتحركة المعقدة ، استخدم ملف useAnimate خطاف مع المرجع.

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

قبل استخدام Framer Motion في مشروعك ، يجب أن يكون لديك ملف وقت تشغيل Node.js ومدير حزمة Yarn المثبت على جهاز الكمبيوتر الخاص بك و فهم ماهية React وكيفية استخدامها.

افتح المحطة الطرفية وقم بتشغيل:

git clone [email protected]: makeuseofcode / Framer-motion-app.git
مؤتمر نزع السلاح فرامير الحركة التطبيق
غزل
ديف الغزل

عندما تفتح ملفات المضيف المحلي: 5173 في متصفحك ، سترى هذا:

يمكنك الآن إنشاء أول رسم متحرك بسيط ، زر ينمو عند التمرير ويتقلص عندما يغادر المؤشر.

افتح ال src / App.jsx ملف في محرر التعليمات البرمجية. يحتوي هذا الملف على مكون وظيفي يقوم بإرجاع جزء React. قم باستيراد ملف زر المكون ، ثم يصوره ، ويمرر في ملف نص دعم:

زر متحرك </h4>
حرك الماوس فوق الزر لرؤية التأثير/div>
"تحوم لي"/>
</section>

بعد ذلك ، قم بتحرير ملف Button.jsx ملف واستيراد ملف حركة فائدة من فرامير الحركة:

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

الآن ، استبدل العادي زر عنصر مع حركة. [عنصر] عنصر. في هذه الحالة ، استخدم ملف زر الحركة عنصر.

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

حجم: 1.1 }}>
{نص}
</motion.button>

سيتم تحريك الزر الآن عند تحريك مؤشر الماوس فوقه أو خارجه:

قد تتساءل عن سبب عدم استخدام هذا العرض التوضيحي الرسوم المتحركة CSS بدلاً من. تتميز Framer Motion بمزايا أكثر من CSS لأنها تتكامل مع حالة React وتؤدي عمومًا إلى رمز أكثر وضوحًا.

بعد ذلك ، جرب شيئًا أكثر تعقيدًا: تحريك ملف. في Backdrop.jsx، واستورد أداة الحركة وأنشئ مكونًا وظيفيًا باستخدام عند النقر و أطفال الدعائم. العودة أ الحركة مكون مع فئة "خلفية" و عند النقر المستمع في JSX.

يصدّرتقصيروظيفةالخلفية() {
يعود (<>

 </motion.div>
 </>)
}

ثم أضف ثلاث دعائم وهي: أولي, تحريك و مخرج. تمثل هذه الخاصيات الحالة الأصلية للمكون ، والحالة التي يجب أن يتحرك المكون لها ، والحالة التي يجب أن يكون عليها المكون بعد الرسوم المتحركة ، على التوالي.

يضيف عند النقر و أطفال الدعائم إلى الحركة وقم بتعيين مدة الانتقال على 0.34 ثانية:

يصدّرتقصيروظيفةالخلفية ({onClick ، ​​أطفال}){
يعود (<>
 onClick = {onClick}
 className ="خلفية"
 الأولي = {{ العتامة: 0, مرشح الخلفية:"طمس (0 بكسل)" }}
 تحريك = {{ العتامة: 1, مرشح الخلفية:"طمس (3.4 بكسل)" }}
 خروج = {{ العتامة: 0, مرشح الخلفية:"طمس (0 بكسل)"}}
 الانتقال = {{
 مدة: 0.34,
 }}
 >
 {أطفال}
 </motion.div>
 </>)
}

ال الخلفية المكون هو غلاف لـ مشروط عنصر. يؤدي النقر فوق الخلفية إلى رفض النموذج. في Modal.jsx، يستورد حركة ومكوِّن الصور الخلفية. يقبل المكون الوظيفي الافتراضي الخاصيات: قريب و نص. إنشاء متغير متغير ككائن.

مقدار ثابت المتغيرات = {
 أولي: {
 ص: "-200%",
 العتامة: 1,
 },
 مرئي: {
 ص: "50%",
 انتقال: {
 مدة: 0.1,
 يكتب: "ربيع",
 التخميد: 32,
 الكزازة: 500
 }
 },
 مخرج: {
 ص: "200%",
 }
 }

قم بإعادة مكون motion.div ملفوفًا بمكون Backdrop مع خاصية "variants" التي تشير إلى كائن المتغيرات. المتغيرات عبارة عن مجموعة من حالات الرسوم المتحركة المحددة مسبقًا والتي يمكن أن يكون المكون فيها.

 onClick = {(e) => e.stopPropagation ()}
 className ="مشروط"
 المتغيرات = {متغيرات}
 الأولي ='أولي'
 تحريك ='مرئي'
 خروج ='مخرج'
 >
 {نص}
 </motion.div>
</Backdrop>

بعد ذلك ، تحتاج إلى إضافة وظيفة لعرض النموذج عندما ينقر المستخدم على الزر. افتح ال App.jsx ملف واستيراد ملف useState رد فعل هوك و مشروط عنصر.

يستورد {useState} من"تتفاعل";
يستورد مشروط من"./components/Modal";

ثم قم بإنشاء ملف مشروط الحالة مع تعيين القيمة الافتراضية على خطأ شنيع.

مقدار ثابت [modalOpen، setModalOpen] = useState (خطأ شنيع);

بعد ذلك ، حدد وظيفة قريب هذا يحدد ال مشروط على خطأ.

وظيفةقريب() {
 setModalOpen (خطأ شنيع)
}

في الجزء العلوي من جزء React ، صيّر a مشروط المكون وتمرير المناسب نص دعم مع الدعامة closeModal.

{modalOpen && <مشروطنص="هذا رسم متحرك مشروط باستخدام Framer Motion"}

ثم في الثانية قسم عنصر ، تصيير أ زر عنصر مع معالج حدث onClick الذي يعين modalOpen إلى false.

 setModalOpen (حقيقي)}> إظهار الوسائط </button>

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

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

الآن ، قم بلف المكون الشرطي في مكون AnimatePresence وقم بتعيين ملف أولي دعم للخطأ و وضع بالانتظار \ في الانتظار".

خطأ شنيع} الوضع ="انتظر">
 {modalOpen && <مشروطنص="هذا رسم متحرك مشروط باستخدام Framer Motion"قريب={closeModal} />}
</AnimatePresence>

يسمح مكوِّن AnimatePresence بإكمال الرسوم المتحركة للخروج قبل أن تقوم React بإلغاء تحميلها من DOM.

يمكن لـ Framer Motion تحريك المكونات عند التمرير باستخدام ملف whileInView دعم. افتح ال ScrollElement.jsx، واستيراد ملفات حركة جدوى. يتغير شعبة ل الحركة مع فئة "عنصر التمرير".

 الأولي = {{ العتامة: 0, حجم: 0, استدارة: 14 }}
 whileInView = {{ العتامة: 1, حجم: 1, استدارة: 0 }}
 الانتقال = {{ مدة: .8 }}
 منفذ العرض = {{ مرة واحدة: حقيقي }}
 className ="عنصر التمرير"
>
 عنصر التمرير
</motion.div>

ال منفذ العرض يشير الدعامة إلى كائن يحدد مرة واحدة ل حقيقي. بعد ذلك ، في App.jsx ملف ، قم باستيراد ملف التمرير العنصر مكون وتعريف متغير scrollElementCount يحتوي على قيمة عدد صحيح.

يترك scrollElementCount =14;

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

{[... صفيف (scrollElementCount)]. خريطة ((س ، ط) =><التمرير العنصرمفتاح={أنا} />)}

الآن ، بالعودة إلى المتصفح ، يجب تحريك العناصر عند تمريرها إلى العرض.

بدائل لـ Framer Motion

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

يمكنك أيضًا استخدام الرسوم المتحركة لـ CSS ، والتي تدعمها جميع المتصفحات الحديثة أصلاً ، ولكن قد تكون التقنيات المستخدمة صعبة التعلم والإعداد.

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

يتوقع كل مستخدم تجربة سلسة زبدية عند استخدام تطبيق ويب. يشعر موقع الويب أو التطبيق بدون رسوم متحركة بالثبات وعدم الاستجابة. تعمل الرسوم المتحركة على تحسين تجربة المستخدم لأنه يمكنك استخدامها لتوصيل التعليقات إلى المستخدم عند قيامه بإجراء معين.