二、动效的持续时间和缓动效果（Duration and easing）
自然、灵动应该是Material动效带给人的第一感觉。要做到这样需要我们使用不同的缓动曲线效果和不同的时间长短去创造平滑、连贯的动效。
缓动曲线（Easing curves）
标准曲线（Standard curve）
减速曲线（Deceleration curve）
加速曲线（Acceleration curve）
突变曲线（Sharp curve）
速度
动效发生的过程要足够快，不能让用户产生丝毫等待的情绪。
动态的持续时间
所有的动效不可能应用在同一个时间里面。根据每个对象不同的移动距离、速度和变化去调整动效发生的时间。
比如，某些material对象不需要用户花过多的时间去留意，因此它出现后停留在屏幕的时间可以相对短一些。
常见的动效持续时间
移动端
移动端上的动效持续时间一般在300ms左右：
幅度大，变化复杂或全屏过渡的动效需要较长的持续时间，一般在375ms以上
对象进入屏幕的动效的时间一般在225ms以上
对象离开屏幕的动效的时间一般在195ms以上
当动效时长超过400ms的时候，用户可能就会开始觉得慢了。
大尺寸的屏幕
因为对象在大尺寸屏幕上移动时移动的距离比在小尺寸屏幕上移动的距离要长，所以在相同时间段里面，在大尺寸屏幕上移动的对象速度比在小尺寸屏幕上移动的对象速度更大。也就意味着在大尺寸屏幕上移动的对象需要更长的时间。
平板
平板上动效持续时间要比移动端上的长30%。比如移动端上是300ms的动效在平板上需要390ms。
可穿戴设备
可穿戴设备上动效持续时间要比移动端上的短30%。比如移动端上是300ms的动效在可穿戴设备上需要210ms。
电脑桌面端
电脑桌面端上动效的持续时间要比移动端上的更短。这些动效的持续时间大约在150ms到200ms。
因为在电脑桌面端上做的动效用户看起来会很弱，不明显（译者注：屏幕太大的缘故），所以我们在电脑桌面端上更多追求的是响应的速度，因此在电脑桌面端上动效的持续时间反而要比移动端上的要更短。
自然的缓动曲线
使用缓动曲线可以丰富material对象的速度、透明度和大小变化。
无论是对象在做加速还是减速变化，都需要平滑运动，否则动效就会变得很生硬。
使用缓动曲线可以丰富对象的加速和减速运动。
缓动曲线
不同的缓动曲线在不同的平台或软件上也许有着不同的命名。在这里为了方便沟通，我们给予了这些缓动曲线名称，其中包括标准曲线（Standard curve）、减速曲线（Deceleration curve）、加速曲线（Acceleration curve）和突变曲线（Sharp curve）。
标准曲线
标准曲线是最常见的一种缓动曲线。动效应用了标准曲线的对象一开始会迅速进入加速运动，之后慢慢减速下来直至停止。一般用于屏幕上material对象自身属性的变化。
更多信息请看 在屏幕范围内运动
| 平台 | 参数 |
|---|---|
| Android | FastOutSlowInInterpolator |
| iOS | [[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:0.2f:1.0f] |
| CSS | cubic-bezier(0.4, 0.0, 0.2, 1); |
| After Effects | Outgoing Velocity: 40% Incoming Velocity: 80% |
减速曲线（“Easing out”）
一般用于对象进入屏幕动效。从屏幕外加速进入屏幕内，进入后慢慢减速直至停止。
在做减速运动的同时，对象可能还伴随着尺寸（0-100%）或者透明度（0-100%）的变化。某些情况下，对象进入屏幕动效同时伴有透明度上的变化（0-100），这种情况下它的尺寸也应该有变化（在对象进入屏幕之时的尺寸会比正常尺寸大一点，之后跟随运动慢慢缩回至正常尺寸大小）。
更多信息请看 进入或离开屏幕
| 平台 | 参数 |
|---|---|
| Android | LinearOutSlowInInterpolator |
| iOS | [[CAMediaTimingFunction alloc] initWithControlPoints:0.0f:0.0f:0.2f:1.0f] |
| CSS | cubic-bezier(0.0, 0.0, 0.2, 1); |
| After Effects | Outgoing Velocity: 0% Incoming Velocity: 80% |
加速曲线（“Easing in”）
一般用于对象离开屏幕动效。对象加速离开屏幕，整个过程没有任何地方减速。
在动效开始的时候（就是开始加速运动的时候），对象可能还伴随着尺寸（1000-0%）或者透明度（100-0%）的变化。某些情况下，对象离开屏幕动效同时伴有透明度上的变化（100-0），这种情况下它的尺寸也应该有变化（伴随离屏运动，尺寸上小幅度增大或者缩小）
更多信息请看 进入或离开屏幕
| 平台 | 参数 |
|---|---|
| Android | FastOutLinearInInterpolator |
| iOS | [CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f] |
| CSS | cubic-bezier(0.4, 0.0, 1, 1); |
| After Effects | Outgoing Velocity: 40% Incoming Velocity: 0% |
突变曲线
突变曲线一般应用在那些离开屏幕后有可能返回屏幕的对象。
译者注：突变曲线和标准曲线的区别在于突变曲线是一条对称的曲线，而标准曲线是一条不对称的曲线。
对象从屏幕上的一个点迅速加速朝着屏幕外的另外一个点离开屏幕，当离开屏幕刹那马上减速停止。其减速直到停止的时间要比标准曲线的更快，因为它不是以离开屏幕为目标，而是暂时离开，也就是说指不定在什么时候就会从屏幕外的那个点返回到屏幕中来。
| 平台 | 参数 |
|---|---|
| Android | - |
| iOS | - |
| CSS | cubic-bezier(0.4, 0.0, 0.6, 1); |
| After Effects | Outgoing Velocity: 40% Incoming Velocity: 40% |
