动效 Motion
合适的动效可以增强界面活力和体验舒适度，帮助用户理解信息层级和交互关系。该指南的意义是确保界面中的动效是流畅自然、简洁明了的。
原则
动效是视觉和交互的结合体，所以我们需要明确「合适的动效」的评判维度，一是视觉感官，二是用户体验。
视觉感官：流畅
-
在视觉上是连贯的
-
运动方式是自然的
-
空间轨迹是通畅不发生碰撞的
用户体验：高效
-
能够引导用户理解信息层级关系
-
没有过多的修饰干扰用户
-
动效出现的目的是清晰明了的
时间
企业级应用中，物体的运动时间需要把控的恰到好处。用户难以感知过短的运动时间，但是过长的运动时间会让用户感到不耐烦。
时间梯度
根据人类大脑认知水平，小于100ms的动画是难以感知的，大于1s的动画会让人觉得有吃力感。界面中动效的时间，与运动路径、物体大小和动画复杂程度有强相关，所以我们规范最短动效时间为100ms，以100ms递增。
| 类型 | 描述 |
|---|---|
| 小型 | 覆盖了一小部分区域。 例如颜色渐变、悬停、手风琴、提示气泡... |
| 大型 | 覆盖了更大的视觉区域。 这包括大型容器或侧栏，远距离移动... |
| Token | 时间 | 适用类型 |
|---|---|---|
| duration-immediately | 0.05s | 小型 |
| duration-quickly | 0.25s | 小型 |
| duration-normal | 0.3s | 大型 |
| duration-slowly | 0.4s | 大型 |
速度
真实世界里，物体由于重力摩擦力等关系，自然运动是非匀速的。所以我们规范除渐隐渐显动效外，物体的运动动效使用更接近自然运动的缓动运动。
| 运动类型 | 贝塞尔曲线参数 |
|---|---|
| linear | - |
| subtleEaseIn | cubic-bezier(0.50, 0, 1, 1) |
| subtleEaseInOut | cubic-bezier(.62, .28, .23, .99) |
| instantEaseOut | cubic-bezier(0.1, 0.8, 0.4, 1) |
| subtleEaseOut | cubic-bezier(.44,.9,.6,.94) |
空间
时间和速度组成了位移，而x、y、z三轴的位移组成了物体的运动空间。物体在空间中的运动也应是自然的。
同级物体
-
整体运动方向/递进顺序需符合用户预期
-
确保物体运动顺序是从左至右、从上到下、顺时针的
从属物体
-
着重表达核心物体的动效，从属物体的动效应当弱化或者捆绑运动
-
确保物体们运动轨迹不发生碰撞
三维空间
-
当物体在z轴上有变化时，物体尺寸应相应变化
-
空间视差通过近大远小的位移差来实现
样式
规范不同类型物体的运动样式，方便设计师在设计中选择合适的运动样式。
| 物体/场景 | 推荐使用动效 |
|---|---|
| 文字的出现/消失/切换 | 渐隐渐显+y轴位移 |
| 组件/图片的切换 | x轴位移 |
| 组件/图片的出现/消失 | 渐隐渐显+y轴位移 |