2017 Material design 第二章第二节《动效的持续时间和缓动效果》

2、动效的持续时间和缓动效果（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%