全安卓 Material Design Animation Guildline 動畫原則分析
適用人群：UI 設(shè)計從業(yè)人員 以及相關(guān)UI 動效愛好者。
轉(zhuǎn)發(fā)的朋友請標明出處，尊重原創(chuàng)內(nèi)容，謝謝。
------------------------------------------------------------------
Android Material Design UI Animation Guildline 對于用戶體驗愉悅感的提升。
將整個動效規(guī)范進行拆解。普及系統(tǒng)層面的 UI 動畫知識，
幫助大家真正的理解 UI 動畫的一些具體細則。
解讀背景
一、原則闡述
二、影響動畫的客觀屬性
三、Material Design動畫體現(xiàn)形式
四、Material Design動畫設(shè)計中應(yīng)當注意的
------------------------------------------------------------------
原則闡述:
第一，真實，愉悅的動效，注重真實空間的層次，對象之間的動畫不能直接穿插（CROSS Through）。
視覺設(shè)計師對于整個語言的定義是我們要做真實，讓用戶愉悅的動畫感受，定了這么一套規(guī)范。對象之間的動畫不能直接穿插，什么是穿插？就是我前面一個人，我絕對不能從他背面直接穿過他背面來。所以在真實世界中不可能發(fā)生的情況，在這里也絕對不可能發(fā)生。一句總結(jié)就是：我們希望用戶的真實世界和手機的數(shù)字世界只有一屏之隔。
第二，對象(Object) 在運動過程中不能瞬間開始或者急停，不自然的運動方式容易給用戶造成不愉快的感受 。
這里的對象，就是我們所有的原生組建，可能是一個航天的容器，或者一個表單等等，這些系統(tǒng)的官方組建我們稱為對象。下面這句話什么意思呢？你看到它跑得快并不會氣得把手機摔了，每個物體奔跑之前都有個加速度，這個都是理解。它在移動的例子來告訴大家，真實的例子在啟動到加速的過程中不是純線性的，它會有啟動代步的加速度，隨著距離越來越長，它的加速度會越來越高，所以我們看到這個東西會覺得習(xí)慣，因為它就是一個真實物理的性質(zhì)，或者一條定律。這個就是這里所描述的不愉悅的感受，因為不真實，所以不愉悅。
------------------------------------------------------------------
影響動畫的客觀屬性
Property，這里提到三個量，質(zhì)量、重量、體量，這個并不是你的手機重量，而是你的容器、表單，怎么樣理解它有重量或者是質(zhì)量呢？我們先做一個假設(shè)，同樣密度下，體積越大的物體，質(zhì)量會越大；體積越小的物體，質(zhì)量越小，明白了這點就可以了。
我們來看兩組Cuned Modion曲線的動態(tài)圖，大家先看上面這個，你們認為這兩個球哪個比較真實？紅色比較真實。因為我們看這個線條，藍色其實是純線性運動，但是你注意看紅色的地方，它在頂部接近最頂端的時候有一個阻力效應(yīng)，最后停了下來，而藍色直接到了這里，它少了物體在剎車之前的減速度。
關(guān)于入畫和出畫的解讀（幫助大家理解）
我們講到入畫和出畫，這句話怎么理解？假設(shè)這是一個畫框，我是一個元素，我不可能到這里才開始動，我可能從這里已經(jīng)開始起跑，所以當我沖到畫面當中的時候，你其實看到的不是我的起跑速度，不是我最初從0加速到某一個速度點的速度，而是我從0到30的速度，等我到畫面里的時候，你看到是我40以上的速度。
------------------------------------------------------------------
Material Design動畫體現(xiàn)形式
接下來講它的表現(xiàn)形式，第一個就是Z軸動畫。
軸動畫我把它定義為用戶產(chǎn)生的空間層次的動畫效果，它是一個空間層次動畫效果，它主要是指Z軸深度發(fā)生變化的動畫。什么意思呢？看下面這圖。
它不是X軸或者Y軸二維空間的動畫，它應(yīng)該是Z軸。我們從頂上看，它可能往這里走，但如果從側(cè)面看是空間里面上下。而且還有一個細節(jié)，它有陰影的。如果我們現(xiàn)在看到的這個內(nèi)容，環(huán)境當中應(yīng)該是有燈光的，如果這個東西產(chǎn)生了陰影，它絕對是在三維空間里面發(fā)生的動畫。
這是我對它兩個狀態(tài)的描述，第一個是靜止狀態(tài)，第二個是交互觸發(fā)。同理，對于其它所有的來講都具有這樣一種屬性，所以你們發(fā)現(xiàn)很多東西后面有個淡淡的陰影，這就是做Z軸動畫的時候的一個表現(xiàn)形式。
同樣兩個物體，這個物體在這個物體前面，后面這個物體是不是被前面物體產(chǎn)生的陰影遮擋一部分，所以體現(xiàn)出前景是重要的，這也符合我們的一個邏輯。 。這里有一個不允許的地方，還是我們剛才說的穿插，我不能直接穿插過這個物體。
------------------------------------------------------------------
第二個就是平面動畫。
當我們觸發(fā)一個交互行為的時候，要么就是縮放，要么就是透明度，這些基本屬性全部包含在平面動畫里頭。
第一個是變形，從方形變成圓形，它的動畫大概是這樣的。第二個就是融合類，比如說我在收到一堆短信息的時候，我想把其中第二條刪掉，當我刪掉這一塊之后，一般來講第三條會往上走，跟第一條合并在一起，這個過度柔和自然。
還有一個是鏡像反映，當我點擊觸發(fā)一個頁面的時候，頁面是不是會經(jīng)常出現(xiàn)跳轉(zhuǎn)，我點擊進去之后，當我要回來之后，我除了要點擊首頁之后，右上角一般會出現(xiàn)一個鏡頭，這是返回的意思。切換中從抬頭點擊一下變成了Applicotion，這種東西就是提升用戶愉悅度的體驗。
動畫分類定義：(這里挺重要的哦~)
動畫闡述：
1 (變形類) Material can change shape.
*目前體驗結(jié)果來看，除了基本幾何形體的變形之外，基本沒有發(fā)現(xiàn)特異圖形的變形。
下圖中的步驟演示的是從放行變形到圓形的一個過程動畫.
2 (融合類) join together to become a single
*卡片被切割開之后，會自動融合一體，并且形成一個全新的個體。同時也可再次分割。
3 (突顯類) spontaneously generated
*對象可以突然性的出現(xiàn)和消失，并且可以在場景中的任意位置出現(xiàn)
4 (點擊漣漪) Touch Ripple
*多使用在對于卡片的點擊之后，卡片表面所產(chǎn)生的伴隨手指點擊位置而延展開的MASK+漣漪狀動畫樣式,此類型操作多見于卡片，相冊等相關(guān)有Click操作的場景下。 是最為常見的一種交互動畫樣式。
5（起源點）Point of Origin
*當點擊Option按鈕或“更多”類操作時，會以所點擊的“點（Touch Point）”為軸心進行擴大形成浮層的動畫形式。
------------------------------------------------------------------
Material Design動畫 設(shè)計中應(yīng)當注意的
1.帶有導(dǎo)向性的視覺連貫（Visual Continuity）
*清晰、快速、有序的動態(tài)過渡。是提升用戶關(guān)注度和集中注意力的關(guān)鍵。
新進元素（Incoming elements）應(yīng)當被引入到新的場景中，或在新的場景中被重新建立。
*去除的元素（Outgoing elements）當此類元素與上下文再無關(guān)聯(lián)時，應(yīng)選擇適時的方式去除，以免擾亂用戶注意力。
*持續(xù)性的共享元素（Shared elements）當連貫整個交互流程的元素（ICON,或者圖形，圖片等）允許持續(xù)性的出現(xiàn)，增大到合適的尺寸顯示。
注意我標紅的地方。以頁面當中某一個元素連貫持續(xù)的出現(xiàn)，作為引導(dǎo)用戶的合理存在。
2.有意義的動畫轉(zhuǎn)換（Meaningful transitions）
頁面之間的轉(zhuǎn)換更傾向于上層劃入的動畫方式進行轉(zhuǎn)換（如下圖），點擊觸發(fā)后，圖片位移劃入頁面(方向多為從右至左，或從下至上)，完成轉(zhuǎn)換，若要返回上層，則方向相反劃出頁面。
3. 一致性的順序編排（Consistent choreography）
就像集體舞蹈一樣，動作的編排除了新穎之外，更加重要的就是順序的一致性，直白的說就是“誰先，誰后，我負責什么，你負責什么”
把時間切分成若干個單元，在每個單元里進行操作，這樣才不會出現(xiàn)一個時間單位里面有兩個甚至兩個以上的物體在同時動，這樣給人很零亂的感覺，所以我們必須把時間理解成若干個單元，在一個單元時間內(nèi)只能有一個東西在動，這是它的靜態(tài)步驟，我們看看動態(tài)的。
有序 無序,顯得雜亂
------------------------------------------------------------------
從上面可以看出，左邊的很有序，它就是把所有元素按照一定的步驟，挨個有序的放到它應(yīng)該放的位置，最后完成它應(yīng)該有的布局。這種情況大多數(shù)出現(xiàn)在什么時候？比方說信息列表，或者九宮格的布局，或者某一個界面上面，可能信息元素非常多的時候，有圖片、文字、按鈕、輸入框等等，這種時候用這種方式會比較合理，而不是像里面放一個鞭炮炸爛了四面八方濺得到處都是。
寫到這里，我突然覺得自己做了一件挺有意義的事情。我是老畢，下回見。
