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