Framer Motion مع React: حركات سلسة بسطور قليلة

الأنيميشن الجيد يعطي التطبيق إحساسًا احترافيًا ويُسهّل فهم التفاعل. مع Framer Motion يمكنك إضافة حركات جميلة في React بدون تعقيد.

في هذا الدرس سنتعلم الأساسيات: التثبيت، مكوّنات motion، الانتقالات، والتحكم في الحركات بأمثلة واضحة.

لماذا Framer Motion؟

• إضافة حركات بسهولة بدون CSS معقد.
• تحكم كامل بالحركة عبر React state.
• انتقالات سلسة تعطي تجربة أفضل للمستخدم.

الخطوة 1: التثبيت

npm install framer-motion

الخطوة 2: أول حركة بسيطة

import { motion } from "framer-motion";

function Box() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="p-6 bg-white rounded-xl shadow"
    >
      مرحبًا بك
    </motion.div>
  );
}

هنا العنصر يبدأ شفافًا وأسفل قليلًا، ثم يظهر تدريجيًا للأعلى.

الفكرة الأساسية: ثلاث خصائص

1. initial: حالة البداية.
2. animate: حالة النهاية.
3. transition: طريقة الحركة ومدتها.

حركة عند hover أو tap

function Button() {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="px-4 py-2 bg-blue-600 text-white rounded-lg"
    >
      اضغط هنا
    </motion.button>
  );
}

هذا يعطي زرًا يشعر المستخدم أنه تفاعلي.

أنيميشن مشروط بـ state

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

function ToggleCard() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>تبديل</button>
      <motion.div
        initial={false}
        animate={{ height: open ? 120 : 0, opacity: open ? 1 : 0 }}
        className="overflow-hidden bg-gray-50 rounded-lg"
      >
        <p className="p-4">محتوى مخفي</p>
      </motion.div>
    </div>
  );
}

أفضل الممارسات

• اجعل الحركات قصيرة وسلسة (0.2s - 0.6s غالبًا مناسبة).
• استخدم الحركة لتوضيح التفاعل، لا للزينة فقط.
• اختبر الأداء على الأجهزة الضعيفة.

الأسئلة الشائعة — FAQ

ما هو Framer Motion؟

مكتبة أنيميشن لـ React تسهّل إضافة حركات وانتقالات احترافية.

هل Framer Motion بديل لـ CSS animations؟

يمكن استخدامه بدل CSS خصوصًا عندما تحتاج التحكم بالحركة عبر state.

كيف أعمل انتقال عند الظهور؟

استخدم initial و animate لتحديد البداية والنهاية.

هل يمكن استخدامه مع Tailwind؟

نعم، يمكنك الجمع بين Tailwind للكلاسات وFramer Motion للحركة.

هل المكتبة ثقيلة؟

حجمها معقول لمعظم المشاريع وتستحق لأن النتائج واضحة وسريعة.