Material Design 之运动（Motion）– 过渡时间 & 过渡方式

运动中的实体应该是自然的，响应的。使用这些过渡曲线和持续时间等模式来创建平滑一致的动效。

过渡曲线

标准曲线
减速曲线
加速曲线
尖锐曲线

当元素在两个位置或状态之间移动时，运动应该足够快以至于它不会引起用户的等待，但是也应该足够慢以至于用户可以理解这个过渡。因为用户会频繁地看到这些移动，所以尽可能的保持转换的简练性。

正确

动画足够迅速，用户不必进行等待

不要为所有的动画均使用同一个持续时间，根据动画移动的距离精确匹配其持续时间，以期适应元素的移动速度和表面变化。

离开屏幕的对象可能对应更短的持续时间，因为它们需要较少的注意。

移动设备

移动设备中的过渡时间通常会超过300ms，详情参考下述：

• 规格比较大，比较复杂的全屏过渡需要比较长的过渡时间，一般超过375ms
• 元素进入屏幕一般需要超过225ms
• 元素离开屏幕一般需要超过195ms

超过400ms的过渡会显得比较慢

大屏幕

在较大的屏幕上移动较长距离的元素会比在普通屏幕上进行比较短距离的相应操作的峰值速度要高。较大的屏幕应该有更长的持续时间，这样动作不会显得太快。

平板

平板电脑的过渡时间应该比移动设备长30%。例如，在平板中一个300ms移动时间将增加到390ms。

穿戴设备

穿戴设备的过渡时间应该比移动设备短30%。例如，在手表中一个300ms移动时间将缩短到210ms。

电脑桌面

电脑桌面中的动画应该要比移动设备中的更简单快速，持续时间应该达到150ms到200ms之间。

因为电脑桌面中的元素过渡会引起比较小的关注，所以相对于移动设备其也更应该快速响应。

比较复杂的网页过渡通常会引起画面拖帧（除非其有专门针对CPU加速进行设置），所以较短的持续时间会使动画完成的比较快速从而使拖帧不会被特别注意。

在动画的过渡时间内，加速和减速的变化应该是平滑的，这样运动就不会显得比较机械。

非对等的加速度和减速发生时，运动会显得更加自然和愉快。

标准曲线

标准曲线（也称为“缓和”）是最常见的缓和曲线。元素快速加速并在屏幕位置之间缓慢减速。它比较适用于扩张和收缩的实体，以及其他属性的变化。

减速曲线

使用减速曲线（也称为“减速”）元素以全速进入屏幕并缓慢减速到静止点。

减速过程中，元素可以放大尺寸（至100%）或不透明（至100%）。在某些情况下，当元素进入屏幕时，其透明度为0%，在进入时可能会从较大的尺寸进行收缩。

加速曲线

使用加速度曲线（也称为“缓和”），使元素离开屏幕时保持全速。它们在屏幕关闭时不会减速。

它们在动画开始时加速，可以缩小大小（至0%）或不透明（到0%）。在某些情况下，当元素以0%的透明度离开屏幕时，它们也可能在大小上略有放大或缩小。

尖锐曲线

使用尖锐曲线（也称为“易出”），快速快速加速和减速。

它是由随时返回屏幕的退出元素使用的。元素可以很快从屏幕上的起点加速，然后以一个对称的曲线快速减速到屏幕附近的静止点。减速比标准曲线快，因为它不遵循精确的离屏点路径。元素可以随时从该点返回。