زرار يتكبسscale(0.95) · 0.22s · BackEaseOut
chip في hoverscale(1.05) + لون فاتح · 0.25s للحجم و 0.15s للون
عنصر sidebar في hovertranslateX(3px) ناحية المحتوى · 0.25s · BackEaseOut
لون أو ظل0.15s من غير نطة
drop zone فوقها ملفscale(1.015) + لون · 0.3s · عدّاد لـ dragenter/dragleave
toast بيظهرkeyframes: من opacity 0 و 40px على الجنب · 0.35s · BackEaseOut
صفحة بتفتحkeyframes: من opacity 0 و 10px تحت · 0.28s · CubicEaseOut
dropdownمن scale(0.95) و transform-origin top · stagger 28ms · قفل 120ms
selectالسهم 180deg + ✓ من scale(0.4) + القيمة تطلع من تحت
tabsمؤشر واحد بيتزحلق (left و width) + المحتوى من ناحية التاب
modalخلفية opacity 0.2s + dialog من scale(0.9) 0.32s · قفل 0.16s
switchالزرار يتزحلق بنطة ويتمط وانت دايس
tooltipdelay 300ms في الظهور بس
accordiongrid-template-rows 0fr → 1fr + سهم 90deg
حاجة بتتبع الماوسspring 320 / 20، والرجوع critical (2√k ≈ 36)
spring بتطيرخطوات أقصاها 1/120 ثانية
قايمة عناصر بتظهرstagger 28ms + EaseOutBack 420ms
أي قفلأسرع من الفتح · EaseInCubic · من غير نطة
حركة أقلprefers-reduced-motion · 0.01ms مش none
المعادلات في مكان واحد
// الدونت في Filee (نطة 8.5%)const easeOutBack = (t: number, c1 = 1.55) => 1 + (c1 + 1) * (t - 1) ** 3 + c1 * (t - 1) ** 2;// BackEaseOut الجاهز في Avalonia (نطة 38%، للمسافات الصغيرة)const avaloniaBackOut = (t: number) => { const p = 1 - t; return 1 - p * (p * p - Math.sin(p * Math.PI)); };const easeInCubic = (t: number) => t * t * t;const cubicEaseOut = (t: number) => 1 - (1 - t) ** 3;// spring: خطوة واحدة صغيرةvelocity += (stiffness * (target - value) - damping * velocity) * h;value += velocity * h;خلّصت المذكرة لما
🧠 اختبر نفسك
١) منحنى الحاجات الصغيرة؟ والكبيرة؟ والقفل؟
الصغيرة BackEaseOut، الكبيرة CubicEaseOut، والقفل EaseInCubic.
٢) إمتى spring بدل easing؟
لما الهدف ممكن يتغير والحركة لسه شغالة، زي أي حاجة بتتبع الماوس.
٣) الرقم 28ms ده إيه؟
الـ stagger بين كل شريحة واللي بعدها في فتح الدونت.