मोशन टोकन
भूमिका के अनुसार अवधि, अवधि का पैमाना, भूमिका के अनुसार ईज़िंग, कोई सतह कहाँ से प्रकट होती है, और स्प्रिंग।
tanrei.sys.motion के अंतर्गत मोशन टोकन। मार्गदर्शन के लिए मोशन पढ़ें।
किसी बदलाव में कितना समय लगता है, यह इस पर निर्भर है कि क्या हिलता है: स्थिति का बदलाव, चयन, आकार बदलता हुआ बॉक्स, अपनी जगह पर खुलने वाली सामग्री, और प्रकट होकर जाने वाली हर तरह की सतह — हर एक की अपनी भूमिका है। किसी कंपोनेंट का अवधि टोकन उसकी भूमिका का उपनाम (alias) होता है, इसलिए एक लेयर एक ही पंक्ति में किसी भूमिका के सभी कंपोनेंट की अवधि बदल सकती है। सतह जितनी तेज़ी से प्रकट होती है, उससे तेज़ी से जाती है। भूमिकाएँ मोशन डायल का अनुसरण करती हैं।
| टोकन | मान | प्रीव्यू |
|---|---|---|
--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