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

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

زمان، عشان نعمل حركات وانتقالات (Transitions) مظبوطة في رياكت، كنا بنقعد نكتب كود سي إس إس (CSS) معقد، ونحسب تايمينج (Timing) وملفات طولة وعريضة، وممكن الدنيا تبوظ واحنا بنعمل إخفاء للمكونات (Unmounting). بس حالياً، الدنيا بقت أسهل بكتير مع مكتبة جبارة اسمها فريمر موشن (Framer Motion). في المقال ده، هناخد رحلة تفصيلية نتعلم فيها إزاي نضيف حركات وانتقالات احترافية بأسطر كود بسيطة جداً.

ليه تختار فريمر موشن (Framer Motion) لتصميم واجهات المستخدم (UI Design)؟

فيه مكتبات كتيرة جداً للأنيميشن في عالم الجافا سكريبت (JavaScript)، زي جي إس إس إيه بي (GSAP) أو رياكت سпринг (React Spring)، وكل واحدة ولها استخداماتها. لكن Framer Motion بتتميز بحاجة مهمة جداً وهي البساطة الشديدة وسهولة القراءة. مخصصة بالأساس لرياكت، وده بيخليها تفهم حالة المكونات (Component State) من غير تعقيد.

المكتبة دي بتديك القدرة تعمل:

• حركات ظهور وإخفاء (Enter and Exit Animations) بكل سهولة.
• تفاعل مع حركة الماوس واللمس (Gestures like Drag and Tap).
• حركات متسلسلة (Orchestration) للعناصر ورا بعضها.
• تغييرات في الحجم والشكل بسلاسة تامة.

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

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

npm install framer-motion

بعد ما التثبيت يخلص، تقدر تستدعي المكتبة في أي ملف عندك بكل سهولة. السر كله في استخدام الـ Motion Components، يعني بدل ما تكتب عنصر HTML عادى زي <div>، بتخليه <motion.div>، ومن هنا بتبدأ السحر يشتغل.

أول أنيميشن ليك: جعل العناصر تتحرك وتظهر بسلاسة (Fade In & Slide)

تعال ناخد مثال عملي ومباشر. هانعمل كارد (Card) أو مربع أول ما الصفحة تفتح، يظهر من تحت لفوق ومعاه تدريج في الشفافية (Fade In). شوف الكود ده كده:

import { motion } from "framer-motion";

export default function App() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        style={{
          padding: '40px',
          background: '#4f46e5',
          color: '#fff',
          borderRadius: '12px',
          fontSize: '24px'
        }}
      >
        أهلاً بيك في عالم فريمر موشن!
      </motion.div>
    </div>
  );
}

تعال نفسر الكود البسيط ده سطر بسطر:

• initial: دي الحالة اللي العنصر بيبدأ بيها قبل ما يظهر على الشاشة (في حالتنا دي، شفاف تماماً opacity: 0 ونازل لتحت 50 بكسل y: 50).
• animate: دي الحالة النهائية اللي العنصر هيروح لها (هيوصل لشفافية كاملة ومكانه الطبيعي).
• transition: دي الخصائص الزمنية، زي السرعة (Duration) ونوع الحركة (EaseOut) عشان تدي إحساس طبيعي وناعم للحركة.

التعامل مع إخفاء العناصر باستخدام AnimatePresence

المشكلة الكلاسيكية في رياكت، هي إزاي تعمل أنيميشن وأنت بتشيل عنصر من الشاشة (Conditional Rendering باستخدام && أو useState). العنصر بيختفي فجأة ومن غير ما الأنيميشن يلحق يشتغل!

هنا بيجي دور مكون سحري اسمه AnimatePresence. تعال نشوف بنستخدمه إزاي:

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

export default function ToggleBox() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? "إخفاء العنصر" : "إظهار العنصر"}
      </button>

      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.5 }}
            transition={{ duration: 0.5 }}
            style={{
              width: '200px',
              height: '200px',
              background: '#ec4899',
              margin: '20px auto',
              borderRadius: '10px'
            }}
          />
        )}
      </AnimatePresence>
    </div>
  );
}

لاحظ استخدام الخاصية exit جوه الـ motion component، دي بتحدد بالظبط العنصر هيتحرك إزاي وهو ماشي ورايح على فين. وبفضل AnimatePresence، رياكت بتستنى الأنيميشن يخلص تماماً وبعدين تمسح العنصر من الـ DOM.

نصيحة من أخ: إزاي تطور مهاراتك في تصميم واجهات المستخدم المتحركة؟

يا صديقي، الأنيميشن عامل زي الملح في الأكل؛ شوية صغيرين بيخلوا الطعم تحفة، وزيادة عن اللزوم بيبوظوا الوصفة تماماً. نصيحتي ليك وأنت شغال بـ Framer Motion:

• متزودش في الحركات: مش لازم كل زرار وكل نص يتحرك بطريقة غريبة ومشتتة. خلي الأنيميشن يخدم تجربة المستخدم (UX)، ويساعده يفهم التنقلات مش يعميه.
• اهتم بالأداء (Performance): استخدم دايماً الخصائص اللي المتصفح بيقدر يعمل لها عتاد تسريع (Hardware Acceleration) زي transform و opacity، وابعد عن تحريك الـ width أو height المباشر كل ما أمكن.
• جرب واغلط: المكتبة فيها إمكانيات مرعبة زي الـ Variants والـ Scroll Animations، افتح الدوكومنتري (Documentation) الرسمي وجرب بايديكم، التطبيق العملي هو اللي هيثبت المعلومة في دماغك.

أتمنى يكون المقال وضح لك البداية الصحيحة لعمل حركات وانتقالات احترافية في رياكت. بالتوفيق في مشروعك الجاي، ولو عندك أي استفسار سيبه في الكومنتات!