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%