Material Design Animation

Material Design Animation

Authentic motion 真實的運動

運動以一種優美流動的形式描述了空間關係,功能和目的.

Mass and weight: 質量和重量

在物理世界中,一個物體要運動,必須有力施加在它身上. 力的強度和持續時間規定了物體的加速度或者運動方向的改變. 即使是最急促的開始和結束也不是瞬時發生的, 由於物體的加速或者減速都是須要必定的時間的. 因此,當動畫有着生硬的開始或者結束,或者唐突地改變方向,它們就會看起來很不天然.

Material design中的運動應該在不失高雅簡潔和美感的狀況下,儘量地貼近真實的物理運動和真實世界的行爲.

天然的加速和減速

加速和減速的變化應該在動畫持續時間內平滑變化.

爲了特定的目的,要吸引對某個物體的注意,或者要給某一個動畫增長特徵,能夠在開始和結束的時候改變它的加速度.

不對稱的加速和減速會創造出一種更加天然和愉悅的運動.

當加速和減速不平滑的時候,運動會顯示出機械性,速度和方向上的突兀的改變看起來會不和諧,引發注意.

這就是爲何不對稱的曲線變化比線性的變化要好,線性的變化老是會出現突兀的拐點,因此應該避免線性變化.

 

入口和出口

物體速度和方向的變化會引發用戶的注意.

一個物體在進入和退出幀的時候變化速度,預示着它運動的距離.

好比,一個物體在退出的時候減速,會引發注意,暗示着它將停在畫面幀外邊框不遠處.

特別地,在轉場動畫的時候,須要考慮入口或出口的哪一部分應該得到最多的注意. 在入口和出口處都應該採用一個近乎常量的速度,來減少注意力.

不要在進入的時候加速,退出的時候減速,這樣會吸引不少沒必要要的焦點,分散用戶的注意力.

作出調整

不是全部的物體都是以一樣的方式運動的. 輕或者小的物體能夠運動得更快,由於它們須要的力更小,而大或者重的物體須要更多地時間來加速.

使用曲線型的運動,避免線性分段的路徑. 找出最適合物體的運動特性,而後相應地表達出來.

曲線表現了一種在特定值的範圍內,隨時間的變化. 找出最適合你想描述的運動的曲線.

 

Responsive Interaction 響應式交互

User Input

觸摸,聲音,鼠標和鍵盤是同等重要的用戶輸入.

UI元素看起來都是可觸摸的,視覺和運動線索應該及時認可用戶輸入,而且應該以一種像是被直接操縱的形式動畫.

Surface reaction

收到輸入事件後,系統應該在接觸點上提供即時的視覺確認線索,好比: 手指點擊的地方, 聲音輸入的mic, 鍵盤點擊的合適的字段.

表達這種接觸的核心視覺機制是:"點擊波紋」, 即」Touch Ripple」.

設備表達了一個點擊事件的方法和持續事件,也能夠用來表達其餘的動態變量,好比音量或者點擊壓力.

 

最佳實踐: 從輸入的接觸點(好比指尖的接觸點或者聲音mic的icon)開始,讓視覺反應徑向(輻射狀,放射式)傳播.

 

Material response

除了墨水式的表面反應, 材料在被點擊的時候能夠擡起來,標識出一種活躍狀態.

經過點擊,用戶能夠生成新的材料,或者轉換已經存在的材料,或者直接經過拖拽或者快划來操縱材料.

材料能夠被線性或者徑向改變大小.

在狀態轉換的時候顯示動畫: http://developer.android.com/training/material/animations.html#ViewState

 

原點: 當用戶觸發生成新的材料的時候,它應該從輸入點開始,進行尺寸增加. 這樣就在輸入和生成之間創建了聯繫.

 

點擊升高: 當一個card或者一個可分離的元素被激活的時候, 這個card應該升高,標識它處於一個激活狀態.

爲你的View指定高度:  http://developer.android.com/training/material/shadows-clipping.html#Elevation

 

Radial Action: 徑向行爲

應該給用戶輸入加上視覺反應使之更加清晰.

墨水從輸入點向四面散開的視覺波紋就是一種徑向行爲.

輸入事件是可視化的: 輸入事件和屏幕上事件之間的聯繫應該是視覺上綁定的. 對於觸摸事件或者鼠標來講, 這個發生在接觸點上, 對於聲音來講,則是麥克風的icon. 一個touch ripple標識着touch發生的位置還有時間,另外它也標識着點擊輸入被接收到了.

 

鏈接輸入和行爲: 輸入事件觸發的轉換或者行爲動做, 應該與輸入事件有視覺聯繫. 震中附近的波紋反應比遠處的反應要發生的快, 好比: 1.一系列的內容變化: 不少圖片的出現或消失; 2.一系列的材料運動: 卡片移入或者移出屏幕.

Use the reveal effect:  http://developer.android.com/training/material/animations.html#Reveal

 

Meaningful transitions 有意義的轉換

運動設計能夠經過通知和取悅的兩種方式有效地引導用戶的注意力.

使用運動能夠: 讓用戶在導航上下文之間平滑轉換, 解釋屏幕上元素的排布, 增強元素繼承體系的概念.

 

Visual continuity 視覺連續性

兩種視覺狀態間的轉換應當是清晰, 平滑, 而且輕鬆不費力的.

一個設計良好的轉換能夠告訴用戶應該把注意力放在哪裏.

 

轉換類型和行爲:

Incoming elements: 新生成的或新轉換成的項目被引進或者從新創建.

Outgoing elements: 與上下文再也不相關的元素被移除.

Shared elements: 轉換期間存在的元素, 能夠是微小的(一個圖標), 或者佔據主導位置的(一個gallary圖像慢慢增加到佔據整個屏幕).

 

自定義Activity轉場:  http://developer.android.com/training/material/animations.html#Transitions

 

注意事項:

設計動畫時,注意如下幾個方面:

1.引導用戶的注意力. 用戶的注意力應該被引導到哪裏? 什麼元素和運動能夠達到這種目的? 轉換過程當中, incoming, outgoing, shared元素都應該如何被強調或者去強調?

2.視覺上鍊接轉換. 在轉換狀態之間建立視覺聯繫,能夠經過顏色或者持續性的元素.

3.使用精確的運動. 考慮如何運動一個特定的元素給轉換增長清晰度和愉悅感.

 

Hierarchical timing

當創建一個轉換時, 要注意元素運動的順序和時間. 要確保運動支持信息繼承關係, 經過爲視線創建一個路徑來傳達最重要的內容.

然而, 這並非一個簡單的公式, 說最重要的東西最早運動, 最不重要的最後運動. 

轉換元素的時間應該平滑地流動, 避免脫節的感受.

Consistent choreography

轉換中的元素應該協調地運動. 元素運動通過的路徑應該有意義而且有序. 偶然性的運動會分散注意力.

當轉移中的元素都很協調的時候, 會幫助用戶更好地理解應用.

Use curved motion:  http://developer.android.com/training/material/animations.html#CurvedMotion

 

最佳實踐:

1. 儘可能避免線性的路徑. 可是當運動被限制在一個軸上的時候, 或者運動是朝向或者離開某個點的時候例外.

2. 讓方向性的元素在轉換期間的運動保持一致. 避免衝突的運動和重疊的路徑.

3. 元素運動的深度是多少以及爲何?

4. 若是全部運動的元素都跟隨它們在屏幕上的路徑, 看起來會美觀而且有序嗎? 是否可以描繪出一幅清晰的圖, 指示應該往哪裏看?

5. 經過一致的進入和移出運動來強調元素間的空間關係.

 

Delightful details

動畫能夠存在於一個app中的全部元素組件, 不論規模, 從一個細節的icon, 到關鍵性的轉換和動做.

全部的元素一塊兒工做, 來構建一個滴水不漏的體驗和一個有功能而且漂亮的app.

 

動畫最基本的用法是在轉換中, 可是一個app若是能在一些微小的地方使用動畫真的可以取悅用戶.

一個能夠變成箭頭或者播放鍵的菜單按鈕, 控制了一個平滑轉換, 同時具備兩種功能: 通知了用戶, 也讓app自己在這一刻充滿了驚喜和設計感.

 

 

 

參考資料

Material Design Animation:  http://www.google.com/design/spec/animation/authentic-motion.html