خطوات أضافة Animations لموقعك في React بـ Framer Motion

[x32x01]

أزاى تضيف Animations لموقعك في React باستخدام Framer Motion
بص يا سيدي لو شغال على مشروع React ومحتاج تضيف شوية حركات حلوة وانيميشن واحترافية تخلي الـ UI بتاعك حيوي كدا فأفضل حاجه ارشحها ليك مكتبة Framer Motion مكتبة بسيطة وسهلة وفي نفس الوقت بتديك قوة رهيبة في التحكم في الحركات بطريقة مش معقدة زي CSS أو JavaScript.

بكل بساطه Framer Motion بتخليك تضيف Animations للعناصر بتاعتك بشكل سهل وعلشان هي معمولة مخصوص لـ React، فهتلاقي إنها شغالة بنفس الفكرة بتاعة الComponents اللي انت متعود عليها.

فتعالي نبدأ خطوة بخطوة مع بعض.... بسم الله

1. أول خطوة: تثبيت المكتبة​

زي أي مكتبة React أول خطوة هتعملها هي إنك تنزلها في المشروع بتاعك. هتفتح الـ terminal وتكتب الأمر ده:

npm install framer-motion

2. تاني خطوة:​

خلينا نبدأ بحاجة بسيطة, هنعمل مثلا Fade In لـ عنصر لما الصفحة تفتح كل اللي هنعمله إننا بدل ما نستخدم div العادي، هتستخدم motion.div، ونضيف عليه شوية خصائص.

import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      <h1>نور النور </h1>
    </motion.div>
  );
};

فيه ابسط من كدا؟؟ العنصر دلوقتي هيعمل Fade In لما الصفحة تتفتح والمدة الزمنية بتاعته هتكون 1s الميزة هنا إنك متحكم في كل حاجة حرفيا.

3. تعالي نضيف Transitions معقد شويه​

هنضيف حركات معقدة زي انه يتحرك من مكان لمكان او حجمه يتغير
بص كدا علي المثال دا:

<motion.div
  initial={{ x: -100 }}
  animate={{ x: 0 }}
  transition={{ type: "spring", stiffness: 100 }}
>
  <h1> اتحركنا بنجاخ! </h1>
</motion.div>

في المثال ده يا صديقي العنصر بيبدأ من -100px في الـ x-axis يعني بره الشاشة من الشمال وبعدين بيتحرك للمكان الطبيعي بتاعه استخدمنا spring عشان ندي إحساس مرن شوية وعادي تقدر تلعب في قيمة الـ stiffness عشان تغير سرعة الحركة وشكلها.

4. الـ Gestures - التفاعلات​

ممكن تضيف شوية تفاعلات زي إن العنصر يكبر لما تعدي عليه بالماوس

<motion.button
  whileHover={{ scale: 1.2 }}
>
  اضغطني يا معلم
</motion.button>

في المثال ده الـ button هيكبر لما تعدي عليه بالماوس. ممكن تضيف برضو تأثيرات drag أو اclick بنفس الطريقة.

5. Keyframes:​

زي ما بنعمل في CSS عادي تقدر تستخدم الـ keyframes عشان تعمل حركات معقدة في Framer Motion. شوف كدا هالمثال:

<motion.div
  animate={{ x: [0, 50, 100, 50, 0], opacity: [1, 0.5, 1] }}
  transition={{ duration: 2 }}
>
  أى حاجة هنا
</motion.div>

هنا العنصر بيتحرك يمين وشمال كذا مرة وفي نفس الوقت الـ opacity بتاعته بتتغير الميزة هنا يا برنس إنك تقدر تتحكم في أكتر من خاصية في نفس الوقت.

6. الـ Variants:​

لو عندك أكتر من عنصر وعايز كل واحد يتحرك بطريقة مختلفة تقدر تستخدم حاجة اسمها Variants دي بتخليك تتحكم في الحركات بتاعت العناصر بشكل منظم اكتر وتقدر تتحكم في حركة كل عنصر بطريقة مستقلة بس من مكان واحد

const variants = {
  hidden: { opacity: 0, x: -100 },
  visible: { opacity: 1, x: 0 },
};
<motion.div
  variants={variants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 1 }}
>
  هنا بقى وووو
</motion.div>

في المثال ده بنستخدم الـ variants عشان نحدد حالتين: hidden وvisible للعناصر. الفكرة هنا إنك بتقدر تتحكم في الحركات بشكل منظم وده بيبقى مفيد جدا لو عندك مكونات كتير وعايز تدي لكل مكون حركة خاصة بيه من غير ما تعيد نفس الكود كل مرة.

طيب السوال ال دايما بنسأله اخر كل موضوع ليه تستخدم Framer Motion؟​

- بيقدم API بسيط لكل أنواع الحركات اللي ممكن تحتاجها، زي الـ fade و الـ keyframes.
-المكتبة خفيفة وسريعة ومبنية بطريقة متوافقة تماما مع React،عشان تضمن إن الأداء مش هيتأثر حتى لو زودت الحركات.
- سواء كنت عايز تضيف hover effects أو drag وtap كل ده هيكون سهل مع Framer Motion.