التلميع — حركة أقل، ومقاسات، وإزاي تبني نظام حركة

حركة أقل: Filee بيسمع الكلام

ناس كتير بتدوخ من الحركة. ويندوز وماك ولينكس فيهم إعداد “قلّل الحركة”. Filee بيقرا الإعداد ده من النظام، وكمان حاطط زرار في صفحة الثيم لو عايز تغيّره بإيدك.

اللي بيعمله بسيط: كلاس واحد على الشباك اسمه reduced-motion، وكل الـ transitions بتتشال لما يكون موجود:

<Style Selector="Window.reduced-motion :is(Button),                 Window.reduced-motion :is(ToggleButton),                 Window.reduced-motion Border.chip,                 Window.reduced-motion ListBoxItem">  <Setter Property="Transitions" Value="{x:Null}" /></Style>

والدونت؟ في الـ loop بتاعه بيسأل Motion.Enabled. لو الحركة مقفولة، بيحط كل القيم على هدفها علطول ومفيش spring:

if (!Motion.Enabled){    for (var i = 0; i < _hover.Length; i++)    {        _hover[i].Value = i == ActiveIndex ? 1 : 0;        _hover[i].Velocity = 0;    }    Array.Fill(_open, _closing ? 0 : 1);}

على الويب

@media (prefers-reduced-motion: reduce) {  *, *::before, *::after {    transition-duration: 0.01ms !important;    animation-duration: 0.01ms !important;    transition-delay: 0s !important;  }}

const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;if (reduce) {  spring.value = target; // روح للهدف علطول  spring.velocity = 0;}

نظام حركة صغير تاخده معاك

لو جمعت كل اللي في Filee، هتلاقي إنه بيستخدم ٣ منحنيات و حوالي ٥ مدد بس. حطهم في مكان واحد:

:root {  /* المنحنيات */  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* حاجة صغيرة بتتداس أو تظهر */  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);     /* حاجة كبيرة: صفحة، لوحة */  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);      /* القفل */  /* المدد (من أرقام Filee) */  --dur-color: 0.15s;  /* ألوان وظلال */  --dur-press: 0.22s;  /* زراير */  --dur-hover: 0.25s;  /* chips و sidebar */  --dur-page: 0.28s;   /* صفحة */  --dur-pop: 0.35s;    /* toast و dialog */  --dur-close: 0.16s;  /* أي قفل */  --stagger: 28ms;}

غلطات بتبوّظ الطراوة

خلّصت الفصل لما

• تحترم prefers-reduced-motion في CSS و JS
• تعرف ليه 0.01ms مش none
• تعمل ملف motion tokens فيه 3 منحنيات وشوية مدد
• تعرف الغلطات اللي بتبوّظ الطراوة