动效
基于弹簧的动效令牌、短促的状态过渡，以及必须尊重“减弱动态效果”设置的硬性要求。
在 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
- 焦点环立即出现。 键盘用户需要马上看到自己所在的位置，而不是等一段动画播完。
- 默认没有涟漪。 按下反馈就是状态层；涟漪是主题层面的可选项，而不是基线。
每个实现都必须遵循平台的“减弱动态效果”设置。在该设置下，空间上的运动会被移除，或替换为短暂的交叉淡化，并且没有任何循环播放的动画。这是每个组件“完成定义”的一部分，而不是锦上添花。
所有的值都列在动效令牌参考中。