मोशन
स्प्रिंग पर आधारित मोशन टोकन, स्टेट के छोटे ट्रांज़िशन, और "मोशन कम करें" सेटिंग का पालन करने की कड़ी आवश्यकता।
Tanrei में मोशन किसी बदलाव को समझाता है और फिर रास्ते से हट जाता है। इसका ज़्यादातर हिस्सा 200 से 250 मिलीसेकंड में फ़ेड होकर आती एक स्टेट लेयर है।
मोशन टोकन स्प्रिंग के रूप में, दो अक्षों पर व्यवस्थित हैं:
- स्पेशल (spatial) स्प्रिंग चीज़ों को खिसकाते या उनका साइज़ बदलते हैं। वे थोड़ा आगे निकल सकते हैं, जैसे कोई भौतिक वस्तु ठहरने से पहले करती है।
- इफ़ेक्ट (effects) स्प्रिंग रंग और ओपैसिटी बदलते हैं। वे कभी आगे नहीं निकलते, क्योंकि उछलता हुआ रंग गड़बड़ी जैसा लगता है।
हर प्रकार fast, default और slow में आता है। असली स्प्रिंग ऐनिमेशन वाले प्लैटफ़ॉर्म स्टिफ़नेस और डैंपिंग के मान इस्तेमाल करते हैं; CSS उनके साथ रखी अवधि और cubic-bezier का सन्निकटन इस्तेमाल करता है।
दो स्कीम हैं। Standard डिफ़ॉल्ट है और लगभग क्रिटिकली डैंप्ड है। Expressive ऊपर से जुड़ने वाली एक लेयर है, जिसमें उन प्रॉडक्ट के लिए ज़्यादा उछाल है जो इसे चाहते हैं।
जो ट्रांज़िशन स्प्रिंग नहीं हैं, उनके लिए तय अवधियाँ और ईज़िंग कर्व दिए गए हैं।
| बदलाव का प्रकार | दिशानिर्देश |
|---|---|
| स्टेट का बदलाव (होवर, दबाना, चयन) | 200–250ms |
| किसी एलिमेंट का आना | 300–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
- फ़ोकस रिंग तुरंत प्रकट होती है। कीबोर्ड इस्तेमाल करने वालों को ऐनिमेशन का इंतज़ार किए बिना दिखना चाहिए कि वे कहाँ हैं।
- डिफ़ॉल्ट रूप से कोई रिपल नहीं। दबाने पर फ़ीडबैक स्टेट लेयर है; रिपल थीम के स्तर का विकल्प है, आधार-रेखा नहीं।
हर इम्प्लीमेंटेशन को प्लैटफ़ॉर्म की “मोशन कम करें” सेटिंग का पालन करना होगा। इसके लागू रहते जगह बदलने वाली गति हटा दी जाती है या उसकी जगह एक छोटा क्रॉस-फ़ेड आता है, और कुछ भी लूप में नहीं चलता। यह हर कंपोनेंट के “पूरा” माने जाने की परिभाषा का हिस्सा है, कोई अतिरिक्त सुधार नहीं।
सभी मान मोशन टोकन रेफ़रेंस में सूचीबद्ध हैं।