Framer Motion مكتبة الحركة Motion

آخر تحديث: 2026-11-03

Framer Motion مكتبة الحركة Motion

Framer Motion (المنشورة اليوم كحزمة motion) هي مكتبة الحركة الأشهر في React: صرّح بالحالة الابتدائية والحالة الهدف والانتقال على motion.div فتتكفّل هي بالتحويم بينها. ويتكفّل AnimatePresence بحركات الخروج، وتُدعَم الإيماءات والحركات التخطيطية جاهزًا، ما يجعل المكتبة مناسبة طبيعيًا للواجهات المقادة بالحالة.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

npm install motion

import { motion, AnimatePresence } from 'motion/react'

<motion.div
  initial={{ opacity: 0, y: -20 }}               // initial state
  animate={{ opacity: 1, y: 0 }}                 // target state
  exit={{ opacity: 0 }}                          // exit state (needs AnimatePresence)
  transition={{ duration: 0.3, ease: 'easeOut' }} // transition config
>
  Content
</motion.div>

// Spring physics: <motion.button whileTap={{ scale: 0.9 }} />

⚙️ المعاملات

القيمة المرجعة：لا قيمة مرتجعة — راجع المثال لاستخدام مكتبة الطرف الثالث.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

محاكاة: بعد النقر على فتح النافذة يظهر القناع متلاشيًا خلال 0.3 ثانية، وتنبثق اللوحة من حالة منكمشة أعلى إلى وسط الشاشة (تخفيف يشبه الزنبرك)؛ والنقر على القناع أو زر الإغلاق يُخفيه مجددًا. وهذا يوضّح نهج الحركة التصريحي المقاد بالحالة مضافًا إليه انتقال CSS الذي ينفّذه Framer Motion الحقيقي عبر motion.div و AnimatePresence.

💡 النقاط الأساسية

🏷️ المزيد من المنظومة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن