رموز الحركة
المدد بحسب الدور، وسلّم المدد، ومنحنيات التسارع بحسب الدور، ومن أين يظهر السطح، والنوابض.
رموز الحركة (tokens) تحت tanrei.sys.motion. للإرشادات، اقرأ الحركة.
المدة التي يستغرقها التغيّر تحدّدها طبيعة ما يتحرك: لتغيّر الحالة، وللتحديد، وللصندوق الذي يتغيّر حجمه، وللمحتوى الذي ينفتح في مكانه، ولكل نوع من الأسطح التي تظهر ثم تغيب، دورٌ خاص به. رمز المدة في المكوّن اسمٌ بديل لدوره، فتستطيع الطبقة بسطر واحد أن تغيّر توقيت كل مكوّنات الدور الواحد. يغيب السطح أسرع مما يظهر. وتتبع الأدوار قرص الحركة.
| الرمز | القيمة | معاينة |
|---|---|---|
--tanrei-sys-motion-role-appear-anchored-enter | 300ms | |
--tanrei-sys-motion-role-appear-anchored-exit | 250ms | |
--tanrei-sys-motion-role-appear-hint-enter | 250ms | |
--tanrei-sys-motion-role-appear-hint-exit | 200ms | |
--tanrei-sys-motion-role-appear-modal-enter | 350ms | |
--tanrei-sys-motion-role-appear-modal-exit | 300ms | |
--tanrei-sys-motion-role-appear-sheet-enter | 400ms | |
--tanrei-sys-motion-role-appear-sheet-exit | 350ms | |
--tanrei-sys-motion-role-appear-toast-enter | 350ms | |
--tanrei-sys-motion-role-appear-toast-exit | 300ms | |
--tanrei-sys-motion-role-disclosure | 400ms | |
--tanrei-sys-motion-role-feedback | 450ms | |
--tanrei-sys-motion-role-reduced | 100ms | |
--tanrei-sys-motion-role-resize-default | 300ms | |
--tanrei-sys-motion-role-resize-large | 400ms | |
--tanrei-sys-motion-role-selection-mark | 250ms | |
--tanrei-sys-motion-role-selection-travel | 250ms | |
--tanrei-sys-motion-role-show-delay | 300ms | |
--tanrei-sys-motion-role-state-compact | 200ms | |
--tanrei-sys-motion-role-state-default | 250ms | |
--tanrei-sys-motion-role-state-large | 250ms |
مولَّد من design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
السلّم الذي صُنعت منه الأدوار.
| الرمز | القيمة | معاينة |
|---|---|---|
--tanrei-sys-motion-duration-short1 | 50ms | |
--tanrei-sys-motion-duration-press-hold | 100ms | |
--tanrei-sys-motion-duration-short2 | 100ms | |
--tanrei-sys-motion-duration-stagger | 100ms | |
--tanrei-sys-motion-duration-short3 | 150ms | |
--tanrei-sys-motion-duration-short4 | 200ms | |
--tanrei-sys-motion-duration-medium1 | 250ms | |
--tanrei-sys-motion-duration-medium2 | 300ms | |
--tanrei-sys-motion-duration-medium3 | 350ms | |
--tanrei-sys-motion-duration-medium4 | 400ms | |
--tanrei-sys-motion-duration-long1 | 450ms | |
--tanrei-sys-motion-duration-long2 | 500ms | |
--tanrei-sys-motion-duration-long3 | 550ms | |
--tanrei-sys-motion-duration-long4 | 600ms | |
--tanrei-sys-motion-duration-extra-long1 | 700ms | |
--tanrei-sys-motion-duration-extra-long2 | 800ms | |
--tanrei-sys-motion-duration-extra-long3 | 900ms | |
--tanrei-sys-motion-duration-extra-long4 | 1000ms |
مولَّد من design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
المنحنيات، والأدوار الأربعة التي يختار بها المكوّن تسارع التغيّر: enter للسطح الذي يظهر، وexit للسطح الذي يغيب، وstate لتغيّر الحالة في المكان نفسه، وspatial لما يتحرك أو يتغيّر حجمه في مكانه. كل دور يسمّي منحنى من منحنيات السلّم.
| الرمز | القيمة | المنحنى |
|---|---|---|
--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
كل سطح يظهر — القائمة، والقائمة المنسدلة، والنافذة المنبثقة، والتلميح، ومربع الحوار، والإشعار المؤقت — يبدأ من الشفافية نفسها والمقياس نفسه والمسافة نفسها والتمويه نفسه، ويغيب عائدًا في الطريق نفسه. اختيارٌ واحد من نوعه يحدّدها معًا؛ ويمكن للطبقة أن تختار غيره، أو أن تثبّت إحدى القيم.
tanrei.sys.behavior.appearance
How a surface appears and leaves: a menu, a select's or a combobox's list, a popover, a tooltip, a dialog, a snackbar. fade-scale: it fades in and grows from 0.96 of its size toward its origin. fade: it only fades in. fade-slide: it fades in and travels a short way into place (sys.space.space100). blur-slide: it fades in, travels the same way and comes into focus from a 4 px blur. unfold: it fades in and unfolds from its anchored edge, scaled from 0 along the axis that leaves the anchor. The choice sets sys.motion.appear.*; a layer that pins one of those keeps it whatever the choice. A surface that leaves runs its appearance back. A sheet slides in from its edge under every choice.
مولَّد من tokens/sys/behavior.tokens.json
| الرمز | القيمة |
|---|---|
--tanrei-sys-motion-appear-blur | 0px |
--tanrei-sys-motion-appear-distance | 0px |
--tanrei-sys-motion-appear-opacity | 0 |
--tanrei-sys-motion-appear-origin | anchor |
--tanrei-sys-motion-appear-scale | 0.96 |
مولَّد من design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
لكل نابض أربعة رموز فرعية. الرمزان stiffness و damping يحرّكان المنصات التي فيها حركة نابضية؛ والرمزان duration و easing هما التقريب المستخدم حيث لا تتوفر النوابض، كما في CSS.
| الرمز | stiffness | damping | duration | easing | المنحنى |
|---|---|---|---|---|---|
tanrei.sys.motion.spring.expressive.default-effects | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) | |
tanrei.sys.motion.spring.expressive.default-spatial | 380 | 0.8 | 500ms | cubic-bezier(0.38, 1.21, 0.22, 1) | |
tanrei.sys.motion.spring.expressive.fast-effects | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) | |
tanrei.sys.motion.spring.expressive.fast-spatial | 800 | 0.6 | 350ms | cubic-bezier(0.42, 1.67, 0.21, 0.9) | |
tanrei.sys.motion.spring.expressive.slow-effects | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) | |
tanrei.sys.motion.spring.expressive.slow-spatial | 200 | 0.8 | 650ms | cubic-bezier(0.39, 1.29, 0.35, 0.98) | |
tanrei.sys.motion.spring.standard.default-effects | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) | |
tanrei.sys.motion.spring.standard.default-spatial | 700 | 0.9 | 500ms | cubic-bezier(0.27, 1.06, 0.18, 1) | |
tanrei.sys.motion.spring.standard.fast-effects | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) | |
tanrei.sys.motion.spring.standard.fast-spatial | 1400 | 0.9 | 350ms | cubic-bezier(0.27, 1.06, 0.18, 1) | |
tanrei.sys.motion.spring.standard.slow-effects | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) | |
tanrei.sys.motion.spring.standard.slow-spatial | 300 | 0.9 | 750ms | cubic-bezier(0.27, 1.06, 0.18, 1) |
مولَّد من design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json