持续时间和动画衰减

持续时间和动画衰减

Google - Duration and easing
</br>
材料的动画是灵敏且自然的。使用这些衰减曲线和持续时间来创造平滑且连贯的动画。

速度

当元素发生移动或者状态变化，动作必须足够快，不能引起用户等待。但是要保证变化速度不能快过用户理解能力。由于用户时长会看到这些变化动画，所以过渡的动画必须足够短。

---

动态持续时间

取代以往的对所有动画使用一个单一的持续时间的方案，根据动画的运动距离，元素的速度和页面的变化大小调整每一个动画的持续时间。
移出屏幕的动画可以有一个比较短的持续时间，因为他们需求较少的关注程度。

• 使用较长的持续时间当物体需要移动很长距离或者发生较大的表面变化。
• 使用较短的持续时间当物体移动距离较短或者发生较小的表面变化，

---

共同的持续时间

手机

过渡动画的持续时间通常超过300ms，并且存在如下的变动返回：

• 大规模的，复杂的，全屏的转化可能有更长的持续时间，变化超过375ms
• 物体进入屏幕变化超过225ms
• 物体移出屏幕变化超过195ms
  过渡动画超过400ms会让人感到缓慢。

较大屏幕

物体在较大的屏幕上移动更长的距离，因此具有更高的峰值速度。较大屏幕中需要有更长的持续时间，因此运动才不会太快。

平板

平板上的持续时间需要比手机的长30%左右。例如一个300ms的动画需要加长到390ms。

穿戴设备

穿戴设备的时间要比手机端30%左右。例如300ms的动画要减少到210ms。

桌面

桌面设备的动画需要比手机上的动画更快并且更加简单。这些动画大概持续时间150ms到200ms。
因为桌面的过渡动画是没有那么令人注意的，所以动画必须比手机上的动画反馈的更加灵敏。
复杂的过渡动画通常都会引起掉帧（除非他们进行GPU加速）。更短的持续时间会减少用户注意程度，因为动画都会很快的完成。

---

自然衰减曲线

自然的衰减曲线影响物体的速度，不透明度和尺寸。

加速度和减速度的变化必须是平滑的，因此动画才不会看上去显得很机械。
当加速度和减速度不对称时，动画表现的更加自然并且让人更加喜欢。

衰减曲线

在不同的平台或者软件中，衰减曲线可能被命名成不同的名字。这篇指导文档会把他们称为标准（standard）线，减速（deceleration）曲线，加速（acceleration）曲线和锐利（sharp）曲线

Standard 曲线

这是最普通的衰减曲线，物体在屏幕中快速的加速和缓慢的减速。这适用于材料的增长或者收缩以及其他的属性变换。

Platform	Protocol
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%

Deceleration 曲线

物体进入屏幕时已全速从屏幕外进入，并且逐渐减速进入静止状态点。
在减速过程中，物体可能发生大小（最多100%）和透明度（最多100%）的变化。在一些情况下，当物体以0%不透明度进入屏幕时，他们可能会比刚刚进入时发生轻微的尺寸缩小。

Platform	Protocol
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%

Acceleration 曲线

物体移出屏幕时全速移出。他不会在这个过程中减速。
物体从动画开始进行加速移出，在这过程中可能伴随大小或者透明度变化。在一些情况下，当物体以0%的不透明度移出屏幕时，他们可能在尺寸上略有扩大或者缩小。

Platform	Protocol
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%

Sharp 曲线

锐度曲线用在当物体可能返回到屏幕中时使用。
物体在屏幕上的起始点快速加速，并且当到达屏幕外的静止点时快速减速。减速过程比standard曲线更快，因为它并不遵循明确的移出屏幕路线。物体可能在任意时间回到该点。

Platform	Protocol
Android	-
iOS	-
CSS	cubic-bezier(0.4, 0.0, 0.6, 1);
After Effects	Outgoing Velocity: 40% , Incoming Velocity: 40%