● مجتمع
199-biotechnologies
⚡ فوري
Motion.dev Animations Skill
بواسطة 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill
قم بوصف الحركة التي تريدها؛ احصل على كود Motion.dev الذي يعمل بمعدل 60 إطارًا في الثانية+ مع فيزياء الربيع ودعم الحركة المنخفضة وعدم تغيير التخطيط.
Motion-dev-animations-skill هي إحدى مهارات Claude Code التي تكتب رسومًا متحركة على مستوى الإنتاج باستخدام Motion.dev (المعروف سابقًا باسم Framer Motion). يتم تنشيطه تلقائيًا عند الإشارة إلى الرسوم المتحركة، وتأثيرات التمرير، وMotion.dev، وفيزياء الربيع، وما إلى ذلك، ويصدر تعليمات برمجية تستهدف 60 إطارًا في الثانية +، وتأثير الحزمة <50 كيلو بايت، وإمكانية الوصول الكاملة (يفضل الحركة المنخفضة)، وصفر CLS. يغطي رسوم الدخول المتحركة وتأثيرات التمرير وتفاعلات الإيماءات والتفاعلات الدقيقة والرسوم المتحركة التخطيطية.
لماذا تستخدمه
الميزات الأساسية
- يتم التنشيط تلقائيًا عند مطالبات الرسوم المتحركة/Motion.dev
- أنماط الرسوم المتحركة للدخول والتمرير والإيماءات والجزئية والتخطيط
- مرتبة الشرف تفضل الحركة المنخفضة بشكل افتراضي
- الأهداف بمعدل 60 إطارًا في الثانية+، وحزمة <50 كيلو بايت، وبدون تغيير في التخطيط
- التحويلات المتسارعة بواسطة GPU؛ لا يوجد أي ضرر من دعائم التخطيط
عرض مباشر
كيف يبدو في الممارسة
motion-dev-animations-skill.replay
▶ جاهز
حالات الاستخدام
استخدامات عملية: Motion.dev Animations Skill
متى تستخدمه: يبدو بطلك ثابتًا وتريد رسمًا متحركًا مصقولًا.
الخطوات
-
وصف التأثير
أضف مدخلًا متدرجًا متدرجًا إلى H1 للبطل، والعنوان الفرعي، وCTA. 60 مللي ثانية متداخلة.✓ تم النسخ
→ كود Motion.dev معmotion.div، زنبرك انتقالي، تأخير عبر stagger
-
انخفاض الحركة الاحتياطية
تأكد من أن حركة التفضيلات المخفضة تتخطى الرسوم المتحركة بشكل واضح.✓ تم النسخ
→ تم تطبيق ربط useReducedMotion أو استعلام وسائط CSS
النتيجة: البطل الذي يشعر بأنه حي دون التضحية بإمكانية الوصول إليه.
المزالق
- تحريك الخصائص التي تؤدي إلى التخطيط (العرض، والأعلى) — استخدم التحويل (الترجمة/القياس) بدلاً من ذلك - تسريع GPU، بدون CLS
متى تستخدمه: تحتاج صفحتك المقصودة الطويلة إلى أقسام تتكشف عند التمرير.
الخطوات
-
تكشف على التمرير
قم بتحريك كل قسم عند دخوله إلى إطار العرض (مرة واحدة، عتبة 30٪).✓ تم النسخ
→ استخدمInView مرة واحدة + المبلغ
-
المقدمة المنظر
أضف إزاحة اختلاف المنظر الدقيقة لصورة SVG الأمامية المزخرفة.✓ تم النسخ
→ useScroll + useTransform رسم الخرائط التمريرYالتقدم إلى y
النتيجة: تجربة التمرير التي تضيف عمقًا دون تشتيت الانتباه.
المزالق
- المنظر الذي يسبب دوار الحركة — أبقِ الإزاحات صغيرة وتخطيها بالكامل ضمن الحركة المفضلة المُخفضة
متى تستخدمه: تحتاج بطاقة المنتج إلى تلميع تفاعلي دقيق.
الخطوات
-
رفع تحوم
عند التمرير: ارفع 4 بكسل، مقياس الظل الدقيق؛ الربيع مرة أخرى في إجازة.✓ تم النسخ
→ بينما تحوم مع الربيع. GPU-friendly transforms
-
السحب المغناطيسي
اجعلها قابلة للسحب بحدود مرنة، اسحب Elastic 0.15.✓ تم النسخ
→ السحب + السحب + القيود + السحب المرن تم ضبطه بشكل صحيح
النتيجة: تفاعل ممتع مع البطاقة بدون تكلفة الأداء.
متى تستخدمه: تبدو عمليات إعادة ترتيب القائمة الخاصة بك مزعجة؛ تريد انتقالات سلسة.
الخطوات
-
تمكين التخطيط على العناصر
إضافة رسوم متحركة للتخطيط إلى عناصر القائمة؛ تحريك الدخول/الخروج أيضًا.✓ تم النسخ
→ <motion.li تخطيط> + AnimatePresence
-
انخفاض الحركة
قم بتعطيل الرسوم المتحركة للتخطيط ضمن الحركة المُخفضة المفضلة.✓ تم النسخ
→ تم تطبيق الشرط؛ إعادة الطلب الفوري للمستخدمين الذين طلبوا ذلك
النتيجة: عمليات إعادة الطلب التي تبدو مادية ولكنها تحترم تفضيلات المستخدم.
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
واجهة المستخدم السحرية للمكونات المعدة مسبقًا، وmotion.dev للبتات المخصصة
استخدم شاشة التحديد الخاصة بـ Magic UI للشعارات؛ motion.dev للحصول على المنظر المخصص للتمرير أدناه.✓ تم النسخ
حركة التدقيق لدعم الحركة المنخفضة
بعد إضافة الرسوم المتحركة، قم بالتدقيق باستخدام النطاق=الحركة لاكتشاف تراجعات الحركة المنخفضة.✓ تم النسخ
Figma-to-code + الرسوم المتحركة في تدفق واحد
تحويل إطار Figma؛ ثم أضف الرسوم المتحركة المحددة للدخول والتحويم.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- لا أحد
- الرموز لكل استدعاء
- صغير للكود؛ كبيرة فقط إذا قمت بتفريغ المكونات المعقدة
- التكلفة المالية
- حر
- نصيحة
- قم بوصف هدف الرسوم المتحركة بدقة - "التلاشي مع 60 مللي ثانية متدرجة، ومدة 200 مللي ثانية" إيقاعات "اجعلها لطيفة".
الأمان
الصلاحيات والأسرار ونطاق الأثر
تخزين بيانات الاعتماد: لا أحد
نقل البيانات الخارجي: لا شيء من المهارة؛ الشبكة غير متورطة
- يعد رمز الرسوم المتحركة الذي تم إنشاؤه آمنًا بقدر مراجعتك - تحقق من خيارات الحركة المنخفضة ودعامة التخطيط قبل الشحن.
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
غير المرغوب فيه على التمرير
تأكد من أنك تقوم بتحريك التحويلات، وليس دعائم التخطيط (العرض/الأعلى). استخدم will-change باعتدال.
تحقق: Chrome DevTools → Performance → layout shift count
تم تجاهل الرسوم المتحركة عند الحركة المنخفضة
قم بالالتفاف باستخدام useReducedMotion وقم بقصر دائرة متغيرات الرسوم المتحركة.
تحقق: System → Motion preferences → reduce motion; reload
حزمة كبيرة بعد إضافة الحركة
قم باستيراد ما تحتاجه فقط من "الحركة/التفاعل"؛ تجنب إعادة تصدير كل شيء.
تحقق: Bundle analyzer on the chunks
البدائل
Motion.dev Animations Skill مقابل البدائل
| البديل | متى تستخدمها | المقايضة |
|---|
| magic-ui-mcp | أنت تريد مكونات متحركة معدة مسبقًا، وليس حركة مخصصة | أقل تخصيصًا، وأسرع في الاعتماد |
| cc-frontend-skill | أنت تريد إرشادات عامة للواجهة الأمامية، وليس Motion.dev على وجه التحديد | لا تركز على الرسوم المتحركة |
| excalidraw-skill | تريد الرسوم البيانية، وليس الرسوم المتحركة على شبكة الإنترنت | مشكلة مختلفة |