web-animation-designالغرض والاستخدام والمصدر

ما تفعله هذه المهارة

صمم ونفذ رسومًا متحركة على الويب تبدو طبيعية وهادفة. استخدم هذه المهارة بشكل استباقي كلما طرح المستخدم أسئلة حول الرسوم المتحركة، أو الحركة، أو التسهيل، أو التوقيت، أو المدة، أو النوابض، أو الانتقالات، أو أداء الرسوم المتحركة. يشمل ذلك أسئلة حول كيفية تحريك عناصر واجهة المستخدم المحددة، ونوع التسهيل المناسب، وأفضل ممارسات الرسوم المتحركة، أو اعتبارات إمكانية الوصول للحركة. يتم تشغيل هذه المهارة عند: التسهيل، والتسهيل للخارج، والتسهيل للداخل، والتسهيل للداخل والخارج، ومنحنى بيزير المكعب، والارتداد، وفيزياء النوابض، والإطارات الرئيسية، والتحويل، والشفافية، والتلاشي، والانزلاق، والتحجيم، وتأثيرات التمرير، والتفاعلات الدقيقة، وFramer Motion، وReact Spring، وGSAP، وانتقالات CSS.entrance/exitالرسوم المتحركة، انتقالات الصفحات، التداخل، التغيير التلقائي، تسريع وحدة معالجة الرسومات، يفضل تقليل الحركة.modal/dropdown/tooltip/popover/drawerالرسوم المتحركة، ورسوم الإيماءات المتحركة، وتفاعلات السحب، وشعور الضغط على الأزرار، تبدو متقطعة، اجعلها سلسة.

طريقة الاستخدام وفق المستند الأصلي

Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms

المتطلبات والإعداد

لم يتم اختيار أي فقرة متطلبات مختصرة من هذا الملف. هذا لا يعني أن المهارة لا تعتمد على أي ملفات أخرى. راجع تعليمات إعداد المستودع والملفات المرجعية.

الحدود وفحوصات الجودة

ابدأ بتجربة آمنة

1. تحقق من المضيف المدعوم وتعليمات تثبيت المستودع. احتفظ بمجلد المهارات والبرامج النصية والأصول والوثائق المشار إليها معًا؛SKILL.mdقد يؤدي وجود شخص واحد فقط إلى إغفال بعض التبعيات.
2. زوّد البرنامج ببياناتك الفعلية، والمخرجات المطلوبة، ومعايير القبول. يعتمد بناء جملة الاستدعاء والأدوات المتاحة على النظام المضيف؛ ولا يفترض هذا الموقع وجود أمر تثبيت موحد.
3. جرّب سير العمل الأصلي في مشروع مؤقت أو على نسخة احتياطية. راجع العمليات التي تُغيّر الملفات أو الخدمات البعيدة أو الموارد القابلة للفوترة قبل السماح بها.
4. تحقق من صحة المخرجات بمقارنتها بفحوصات جودة المصدر ومتطلباتك الخاصة. لا يُعدّ نجاح عملية التشغيل أو ارتفاع عدد النجوم في المستودع دليلاً على صحة النتيجة.

مواصفات ملف المهارة وبنية المجلدات ↗

اقرأ المزيد في المصدر

• تصميم الرسوم المتحركة للويب
• الاستجابة الأولية
• نموذج المراجعة (مطلوب)
• بداية سريعة
• التباطؤ التدريجي (الأكثر شيوعًا)
• الانسياب التدريجي (للحركة)
• سهولة (لتأثيرات التمرير)
• خطي (تجنبه في واجهة المستخدم)
• التدرج (نادراً جداً)
• قاعدة العناصر المزدوجة
• إرشادات المدة
• التردد
• متى يتم تحريك الرسوم المتحركة
• رسوم متحركة ربيعية
• متى يتم استخدام النوابض
• إعدادات
• إرشادات الارتداد
• قابلية المقاطعة
• القاعدة الذهبية
• تقنيات التحسين
• CSS مقابل JavaScript
• إمكانية الوصول
• يفضل تقليل الحركة
• إرشادات تقليل الحركة
• اعتبارات أجهزة اللمس
• نصائح عملية
• مخطط انسيابي لقرار التيسير
• ملفات مرجعية

المهارات ذات الصلة

• agent-browservercel-labs/open-agents
• ai-sdkvercel-labs/open-agents
• baseline-uivercel-labs/open-agents
• chat-sdkvercel-labs/open-agents

الترجمة والنطاق

يختار دليل القراءة هذا مقاطع من المصدر الرئيسي المثبتSKILL.mdهذه الترجمة مساعدة. وهي ليست دليلاً كاملاً ولا تضمن التوافق المُختَبَر. يُرجى قراءة النص الأصلي والملفات المُشار إليها قبل الاستخدام.

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

المصدر بإصدار ثابت

اقرأ الأصل ↗

تم استرجاع المصدر

2026-10-29T09:32:23Z

معرّف نسخة Git

cf865e94de7729751c747171785b6ce57e7b178c

المصدر SHA-256

dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332