·12-principles-of-animation
*

12-principles-of-animation

قم بتطبيق مبادئ ديزني الـ 12 للرسوم المتحركة على واجهات الويب. يُستخدم عند تنفيذ الحركة، أو مراجعة جودة الرسوم المتحركة، أو تصميم التفاعلات الدقيقة، أو جعل واجهة المستخدم تبدو حية. يتم تشغيل المهام التي تتضمن رسوم CSS المتحركة، أو التحولات، أو مكتبات الحركة، أو تخفيف المنحنيات، أو الزنبركات، أو تعليقات UX.

252التثبيتات·2الرائج·@raphaelsalaja

التثبيت

$npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation

كيفية تثبيت 12-principles-of-animation

ثبّت مهارة الذكاء الاصطناعي 12-principles-of-animation بسرعة في بيئة التطوير لديك عبر سطر الأوامر

  1. افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
  2. نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation
  3. تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

المصدر: raphaelsalaja/userinterface-wiki.

Disney animators codified these principles in the 1930s to make drawings feel real. We use them to make pixels feel human. The problems are surprisingly similar.

| 1 | Squash and Stretch | Convey weight and elasticity in morphing elements | | 2 | Anticipation | Prepare users for what comes next (wind-up before action) | | 3 | Staging | Direct attention through sequential animation | | 4 | Straight Ahead & Pose to Pose | Define keyframes, let browser interpolate |

| 5 | Follow Through & Overlapping | Use springs for organic overshoot-and-settle | | 6 | Slow In & Slow Out | Apply easing curves for natural acceleration | | 7 | Arcs | Add curved paths for organic movement | | 8 | Secondary Action | Reinforce primary actions with subtle flourishes | | 9 | Timing | Keep interactions under 300ms, be consistent |

حقائق جاهزة للاقتباس

حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.

أمر التثبيت
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation
الفئة
*وسائط إبداعية
موثق
أول ظهور
2026-02-01
آخر تحديث
2026-03-10

Browse more skills from raphaelsalaja/userinterface-wiki

إجابات سريعة

ما هي 12-principles-of-animation؟

قم بتطبيق مبادئ ديزني الـ 12 للرسوم المتحركة على واجهات الويب. يُستخدم عند تنفيذ الحركة، أو مراجعة جودة الرسوم المتحركة، أو تصميم التفاعلات الدقيقة، أو جعل واجهة المستخدم تبدو حية. يتم تشغيل المهام التي تتضمن رسوم CSS المتحركة، أو التحولات، أو مكتبات الحركة، أو تخفيف المنحنيات، أو الزنبركات، أو تعليقات UX. المصدر: raphaelsalaja/userinterface-wiki.

كيف أثبّت 12-principles-of-animation؟

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

أين مستودع المصدر؟

https://github.com/raphaelsalaja/userinterface-wiki