2017 Material design 第二章第二節《動效的持續時間和緩動效果》

D27發表於2017-07-26

二、動效的持續時間和緩動效果(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%

相關文章