ازاي تعمل حركات وانتقالات احترافية في رياكت (React) باستخدام فريمر موشن (Framer Motion)

يا هلا بيك يا صديقي المبرمج! كام مرة كنت قاعد بتشتغل على مشروع رياكت (React) وخلصت الكود وكل حاجة شغالة زي الفل، بس لما جيت تبص على النتيجة النهائية حسيت إن التطبيق "ميت" وجامد شوية؟ الحركات البسيطة والانتقالات (Animations) هي اللي بتفرق بين موقع عشوائي وموقع احترافي بيشد العين. زمان، كنا بنقعد نعاني مع الـ CSS Transitions والـ Keyframes عشان نعمل حركة بسيطة لظهر أو اختفاء عنصر (Fade In/Out)، وكان الكود بيقلب بسبوسة معقدة وصعب صيانته.

بس تقلقش، النهاردة هنتكلم عن السلاح السري اللي هيخليك تعمل أحلى الحركات بأسطر كود قليلة جداً وبكل سهولة. هنشرح مع بعض إزاي نستخدم مكتبة فريمر موشن (Framer Motion) في تطوير الويب (Web Development) عشان ننقل مشاريعنا لمستوى تاني خالص.

ليه تختار فريمر موشن (Framer Motion) لمشاريع الرياكت (React) بتاعتك؟

فيه مكتبات كتيرة جداً للـ Animations في عالم الجافاسكريبت (JavaScript)، زي GSAP أو React Spring، وكل واحدة ولها استخداماتها. بس مميزات فريمر موشن (Framer Motion) بتخليها هي الاختيار الأول لأغلب المطورين:

• سهولة الاستخدام (Ease of Use): مش محتاج تفتح ملفات CSS خارجية وتقعد تربط الكلاسات ببعضها، كل حاجة بتتم جوه مكون الـ JSX بتاعك.
• الأداء العالي (Performance): المكتبة مبنية بطريقة تخلي الحركات سلسة (Smooth) ومبتعملش تهنيج (Lag) في المتصفح.
• التعامل مع ظهور وإخفاء العناصر (Mount/Unmount Animations): دي أكتر حاجة كانت معقدة في رياكت، وفريمر موشن حلتها بكل بساطة بمكون اسمه AnimatePresence.

خطوات التثبيت والبدء السريع (Getting Started)

عشان نبتل نتحرك ونعمل شغل عالي، أول خطوة محتاجين نعملها هي تثبيت المكتبة في مشروع الرياكت بتاعنا. افتح التيرمينال (Terminal) واكتب الأمر البسيط ده:

npm install framer-motion

أو لو بتحب تستخدم يارن (Yarn):

ناصر يارن add framer-motion

بمجرد ما التثبيت يخلص، تقدر تستورد المكتبة بكل سهولة في أي ملف عندك وتبدأ تحرك أي عنصر عن طريق تحويل العبوات العادية لـ motion elements، زي مثلاً motion.div أو motion.button.

أول حركة ليك: تحريك عنصر عند ظهوره (Basic Animations)

تعالوا ناخد مثال عملي وبسيط. فرضا عندنا كارد (Card) وعايزين أول ما الصفحة تفتح، الكارد ده يظهر بتأثير تدريجي مع حركة لفوق (Fade in and Slide up). الكود هيكون بالمنظر ده:

import { motion } from "framer-motion";

function App() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8 }}
    >
      <h1>أهلاً بيك في عالم الـ Animations!</h1>
    </motion.div>
  );
}
export default App;

الخصائص هنا واضحة جداً وسهلة:

• initial: الحالة الأولى للعنصر قبل ما يظهر (الشفافية صفر ونازل لتحت 50 بكسل).
• animate: الحالة النهائية أول ما العنصر يحصل له Render (الشفافية واحد ومكانه الطبيعي y=0).
• transition: بتحدد سرعة ونوع الحركة (هناخدت 0.8 ثانية).

التحكم في ظهور وإخفاء العناصر (AnimatePresence)

المشكلة الكلاسيكية في رياكت كانت إن لما عنصر يتداس عليه زرار ويمسحه من الـ DOM، العنصر بيختفي فجأة (Pop out) من غير أي حركة ناعمة. هنا بيجي دور الـ AnimatePresence.

عشان تعمل حركة خروج (Exit Animation)، بتلف المكونات بتاعتك جوه AnimatePresence، وتدي للعنصر الخاصية exit بالشكل ده:

import { motion, AnimatePresence } from "framer-motion";

function Modal({ isOpen }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8 }}
          transition={{ duration: 0.3 }}
        >
          <p>أنا نافذة منبثقة (Modal) متحركة!</p>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

خاتمة ونصيحة من أخ

في النهاية يا صديقي، الـ Animations حليوة وبتدي روح للتطبيق، بس خد بالك من القاعدة الذهبية: "خير الكلام ما قل ودل". الإفراط في استخدام الحركات بيخلي الموقع مزعج وممل للمستخدم وبطيء في الأداء. استخدم الحركات في المكان الصح عشان تلفت الانتباه أو تسهل تجربة المستخدم (UX)، وماتخليش الصفحة تتحول لمدينة ملاهي!

اتمرن على الحاجات دي، اعمل مشاريع تجريبية (Coding Challenges)، وطور مهاراتك خطوة بخطوة. بالتوفيق ليك يا بطل في رحلتك البرمجية!