动效令牌

tanrei.sys.motion 下的动效令牌。使用指引请阅读动效。

按角色划分的时长

link

一次变化需要多长时间，取决于动的是什么：状态的变化、选择、改变大小的盒子、原地展开的内容，以及每一种出现又离开的界面，各有自己的角色。组件的时长令牌是其角色的别名，因此一个图层只需一行，就能调整同一角色下所有组件的时长。界面离开时比出现时更快。各角色的时长跟随动效刻度盘。

令牌	值	预览
--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

时长

link

各角色所依据的刻度。

令牌	值	预览
--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

缓动

link

缓动曲线，以及组件为变化选择缓动时所依据的四个角色：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

界面从何处出现

link

所有出现的界面——菜单、列表、弹出框、工具提示、对话框、消息条——都从同样的不透明度、缩放、距离和模糊开始，离开时沿同一条路径返回。这些值由一个“类型选择”一并决定；图层可以选择另一种，也可以固定其中某一个值。

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

弹簧

link

每个弹簧有四个子令牌。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