تعلم Framer Motion لإضافة Animations في React

أزاى تضيف Animations لموقعك في React باستخدام Framer Motion ​

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

ايه هي Framer Motion؟ ​

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

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

زي أي مكتبة [React]، هتفتح الـ[Terminal] وتكتب الأمر ده:

npm install framer-motion

مثال بسيط: Fade In عند فتح الصفحة ​

هنعمل عنصر يعمل Fade In لما الصفحة تفتح باستخدام [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>
);
};

الميزة هنا إنك متحكم في كل حاجة حرفياً، والمدة الزمنية للـAnimation هتكون 1 ثانية.

حركات معقدة: Transitions ​

ممكن تحرك العنصر من مكان لمكان أو تغير حجمه باستخدام Spring:

<motion.div
initial={{ x: -100 }}
animate={{ x: 0 }}
transition={{ type: "spring", stiffness: 100 }}

>

  <h1>اتحركنا بنجاح!</h1>
</motion.div>

الـ[x] بيبدأ من -100px (بره الشاشة من الشمال) وبيتحرك للمكان الطبيعي، وقيمة الـ[stiffness] تتحكم في مرونة الحركة وسرعتها.

التفاعلات: Gestures ​

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

<motion.button
whileHover={{ scale: 1.2 }}

>

اضغطني يا معلم
</motion.button>

كمان ممكن تضيف drag أو click بنفس الطريقة.

Keyframes ​

زي ما بنعمل في [CSS]، ممكن تستخدم [Keyframes] لحركات معقدة:

<motion.div
animate={{ x: [0, 50, 100, 50, 0], opacity: [1, 0.5, 1] }}
transition={{ duration: 2 }}

>

أي حاجة هنا
</motion.div>

الميزات هنا إنك تتحكم في أكتر من خاصية في نفس الوقت.

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 بتخليك تتحكم في كل عنصر بطريقة مستقلة من مكان واحد، وده مفيد جداً لو عندك مكونات كتير.

ليه تستخدم Framer Motion؟ ​

• API بسيط لكل أنواع الحركات زي fade و keyframes.
• المكتبة خفيفة وسريعة ومبنية متوافقة تماماً مع [React] عشان الأداء مش يتأثر.
• سهولة إضافة hover effects، drag، tap، وأي تفاعلات بسرعة وسلاسة.