الحركة
رموز حركة مبنية على النوابض، وانتقالات حالة قصيرة، وإلزام صارم باحترام تقليل الحركة.
الحركة في Tanrei تشرح التغيير ثم تتنحّى. وأغلبها طبقة حالة تظهر تدريجيًّا خلال 200 إلى 250 ميلي ثانية.
رموز الحركة (tokens) منظَّمة في صورة نوابض على محورين:
- النوابض المكانية (spatial) تحرّك الأشياء أو تغيّر حجمها. وقد تتجاوز هدفها قليلًا، كما يستقرّ جسم مادي.
- نوابض التأثيرات (effects) تغيّر اللون والعتامة. ولا تتجاوز هدفها أبدًا، لأن اللون الذي يرتدّ يبدو خللًا.
يأتي كل نوع بثلاث سرعات: سريع وافتراضي وبطيء. المنصات التي فيها حركة نابضية حقيقية تستخدم قيمتَي الصلابة والتخميد؛ أما CSS فيستخدم المدة وتقريب cubic-bezier المخزَّنين بجانبهما.
هناك مخططان. القياسي (standard) هو الافتراضي، وتخميده قريب من التخميد الحرج. والتعبيري (expressive) طبقة إضافية فيها ارتداد أكثر للمنتجات التي تريده.
تتوفر مدد ثابتة ومنحنيات تسارع للانتقالات التي ليست نوابض.
| نوع التغيير | الإرشاد |
|---|---|
| تغيّر حالة (تحويم، ضغط، تحديد) | من 200ms إلى 250ms |
| دخول عنصر | من 300ms إلى 400ms، وأطول للسطح الأكبر |
| كشف كبير | حتى 800ms، مع تعاقب العناصر بفاصل 100ms |
| كل ما يخرج | أسرع مما دخل |
| الرمز | القيمة | المنحنى |
|---|---|---|
--tanrei-sys-motion-easing-emphasized-accelerate | cubic-bezier(0.3, 0, 0.8, 0.15) | |
--tanrei-sys-motion-easing-emphasized-decelerate | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--tanrei-sys-motion-easing-enter | cubic-bezier(0.2, 0, 0, 1) | |
--tanrei-sys-motion-easing-exit | cubic-bezier(0.3, 0, 1, 1) | |
--tanrei-sys-motion-easing-linear | cubic-bezier(0, 0, 1, 1) | |
--tanrei-sys-motion-easing-spatial | cubic-bezier(0.2, 0, 0, 1) | |
--tanrei-sys-motion-easing-standard | cubic-bezier(0.2, 0, 0, 1) | |
--tanrei-sys-motion-easing-standard-accelerate | cubic-bezier(0.3, 0, 1, 1) | |
--tanrei-sys-motion-easing-standard-decelerate | cubic-bezier(0, 0, 0, 1) | |
--tanrei-sys-motion-easing-state | cubic-bezier(0.2, 0, 0, 1) |
مولَّد من design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
- حلقة التركيز تظهر فورًا. مستخدمو لوحة المفاتيح يحتاجون إلى رؤية موضعهم دون انتظار حركة.
- لا تموّج افتراضيًّا. استجابة الضغط هي طبقة الحالة؛ والتموّج خيار على مستوى السمة، لا جزء من الأساس.
يجب أن يحترم كل تنفيذ إعداد تقليل الحركة في المنصة. وعند تفعيله تُزال الحركة المكانية أو يحلّ محلّها تلاشٍ متقاطع قصير، ولا يتكرر شيء في حلقة. هذا جزء من تعريف الاكتمال لكل مكوّن، وليس تحسينًا إضافيًّا.
جميع القيم مسرودة في مرجع رموز الحركة.