إتقان Framer Motion: دليل شامل للرسوم المتحركة المذهلة

مرحباً بك في دليل احترافي حول إتقان Framer Motion لصياغة رسوم متحركة مذهلة في تطبيقات React. سواء كنت مبتدئاً أو لديك بعض الخبرة مع Framer Motion، سيغطي هذا الدرس الأساسيات ويمكّنك من إنشاء رسوم متحركة مبهرة بسهولة.

مقدمة

Framer Motion هي أداة قوية تبسط عملية إنشاء الرسوم المتحركة في تطبيقات React. توفر واجهة برمجة تصريحية، مما يجعل من السهل إنشاء وإدارة الرسوم المتحركة بدون كود معقد.

البدء

للبدء، ستحتاج إلى تثبيت Framer Motion في مشروع React الخاص بك:

npm install framer-motion
# أو
yarn add framer-motion

ثم قم باستيراد Framer Motion في مكونات React الخاصة بك:

import { motion } from 'framer-motion';

المفاهيم الأساسية

1. خاصية Animation

تتيح لك خاصية animate تحديد الحالة النهائية للرسوم المتحركة.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div
    animate={{ opacity: 1 }}
    initial={{ opacity: 0 }}
    transition={{ duration: 1 }}
  >
    مرحباً بالعالم!
  </motion.div>
);

2. الإطارات الرئيسية

تمكنك الإطارات الرئيسية من تحديد حالات وسيطة متعددة للرسوم المتحركة.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div
    animate={{ x: [0, 100, 0] }}
    transition={{ duration: 2, ease: 'easeInOut' }}
  />
);

3. المتغيرات

المتغيرات هي حالات محددة مسبقاً يمكن تطبيقها على المكونات.

import { motion } from 'framer-motion';
 
const variants = {
  open: { opacity: 1, x: 0 },
  closed: { opacity: 0, x: '-100%' },
};
 
export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <motion.div
      animate={isOpen ? 'open' : 'closed'}
      variants={variants}
    >
      <button onClick={() => setIsOpen(!isOpen)}>
        تبديل
      </button>
    </motion.div>
  );
};

4. رسوم الإيماءات المتحركة

تقدم Framer Motion رسوم متحركة للإيماءات مثل whileHover و whileTap لإنشاء مكونات تفاعلية.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div
    whileHover={{ scale: 1.1 }}
    whileTap={{ scale: 0.9 }}
  >
    مرر فوقي وانقر علي
  </motion.div>
);

5. السحب

اجعل أي مكون قابلاً للسحب باستخدام خاصية drag.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div drag />
);

6. قيم الحركة

توفر قيم الحركة طريقة لدفع الرسوم المتحركة ديناميكياً بناءً على بعض المدخلات.

7. الرسوم المتحركة المشغلة بالتمرير

شغّل الرسوم المتحركة عندما يتم تمرير مكون إلى العرض باستخدام خاصية whileInView.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div
    whileInView={{ opacity: 1 }}
    initial={{ opacity: 0 }}
  />
);

مواضيع متقدمة

تشمل Framer Motion مواضيع أكثر تقدماً مثل رسوم الخروج المتحركة ورسوم التخطيط المتحركة والتكامل مع مكتبات الطرف الثالث.

رسوم الخروج المتحركة

تتيح لك رسوم الخروج المتحركة تحريك المكونات خارج DOM باستخدام AnimatePresence.

رسوم التخطيط المتحركة

حرّك تخطيط المكون تلقائياً عندما يتغير حجمه أو موقعه باستخدام خاصية layout.

الخاتمة

تهانينا! لقد اكتسبت فهماً أساسياً لـ Framer Motion وميزاتها الرئيسية. جرب هذه المفاهيم وأنشئ رسوماً متحركة مذهلة وتفاعلية في تطبيقات React الخاصة بك.

لمزيد من القراءة والمزيد من الأمثلة، راجع توثيق Framer Motion الرسمي. رسوم متحركة سعيدة!

المراجع

• توثيق Framer Motion من Framer B.V.