1小時學個新技能，讓UI效果圖動起來！
對於任何一種形式的數字動畫來說，都離不開「幀」的概念。幀是動畫的核心驅動力。
當把一個最簡單的位移動畫拆解開，我們會發現，其實所謂的動畫最初始的運動規則就是在預先設定的兩個位置（或兩種狀態）之間進行變換的過程。
所以，對於動畫來說，真正了解它的原理之後，你會發現其實沒有想像中的那麼難。
下面我們來學習一下，怎麼讓 UI 元素能通過合理的設置真正地動起來。
幀與關鍵幀
在UI動效設計中，幀是最基本的單位，每一個精彩的動畫效果都是由很多個精心雕琢的幀構成的，在時間軸上的每一幀都可以包含需要顯示的所有內容，包括圖形、聲音、各種素材和其他多種對象。而關鍵幀即指有關鍵內容的幀，主要用來定義動畫變化和更改狀態的幀。
以圖為例，這裡需要設置的其實就是A和B這一頭一尾的關鍵轉折點，我們稱之為「關鍵幀」。當設置好關鍵幀之後，計算機會自動幫我們把裡面的幀數算出來。而中間出現的每一個過程圖，我們稱之為一幀。
設置關鍵幀
針對國內的動畫片製作團隊，基本上都是至少保證每秒的畫面在12幀，幀數越多，畫面則越細膩，幀數越少，畫面就有可能會出現卡頓感。
大家在After Effects中新建合成的時候，裡面會有一個「幀速率」選項，幀速率的單位是FPS(Frame Per Second，指視頻每播放一秒鐘中包含的畫面張數。默認情況下是 24FPS 或者 25FPS，幀速率越高， 意味著畫面動作越細膩。
在動效製作過程中，如果你希望最後輸出的動效項目不要太大，那麼就可以適當減少「幀速率」，但是最好不要少於 10FPS。個別情況下，可設置成 8FPS，若再低，就有可能會影響動畫的流暢度了，需要慎重。
關鍵幀的創建與使用
幀是使動畫得以運動的基本組成部分，關鍵幀則是賦予動畫特定的運動方式的規則，因而如何設置關鍵幀是實際製作動畫的第一步。
以圖為例，圖中顯示的是After Effects中關鍵幀按鈕在未激活和激活中所顯示的不同狀態，且這個按鈕在動效製作中是使用頻率較高的一個按鈕，幾乎所有的屬性設置都會用到，所以當需要製作一個動畫的時候，首先要激活它，然後再設置你的動畫關鍵幀。
關鍵幀按鈕未激活和激活時顯示的不同狀態
1. 如何添加關鍵幀
下面，我將會用一個簡單的例子向大家講解設置關鍵幀的基本流程，這個流程適用於After Effects 中所有不同類型的動畫設置。
01打開 After Effects，新建一個文件夾，然後創建一個圓形，如圖所示。
創建一個圖形
02選中圓形圖層，按鍵盤上的快捷鍵 P[ 意為 Position（位移）的首字母 ]，此時在界面中會展開一個位移屬性面板，如圖所示。
展開位移屬性面板
同理，快捷鍵 R 代表 Roation（旋轉），快捷鍵 S 代表 Scale（縮放），快捷鍵 M 代表 Mask( 蒙版 ) 。不同的是，透明度的快捷鍵是T ，而它對應的是Opacity（透明度）中的T字母。同時，這裡所描述的 幾個快捷鍵都是 UI 動效製作中常用的快捷鍵，希望大家謹記。
03在展開的位移屬性面板左側，可以看到前文描述的關鍵幀按鈕，單擊這個按鈕，使其激活並呈 現高亮藍色狀態。此時，關鍵幀按鈕右側的時間滑塊區域會在滑動條的位置同時生成一個菱形的點，這就是第一個被激活的關鍵幀，即關鍵幀 A 點 , 如圖所示。
第一個被激活的關鍵幀
04一個動畫至少需要有兩個或者兩個以上的關鍵幀才能得以實現，因此接下來需要設置關鍵幀 B 點。首先，拖動右邊的時間滑條到 4s 的位置，然後把小球從 A 點移動到 B 點，此時你會看到在時間滑條停止的位置，出現了一個新的菱形的關鍵幀點，即關鍵幀 B 點，如圖所示。
設置關鍵幀 B 點
05拖動After Effects的時間滑條到第一幀的位置，然後按一下鍵盤上的空格鍵，此時你會看見一個小球的播放動畫已經完成。
當然，你也可以根據時間的長短來控制動畫的速度，一般兩個點挨得越近，動畫的速度就會越快，反之則越慢。
2. 刪除關鍵幀
在After Effects的圖層區域，選中你需要刪除的關鍵幀點的圖層，然後按一下鍵盤上的Delete 鍵，即可刪除這個關鍵幀，非常簡單。
當然，如果你要刪除整個屬性的所有關鍵幀，只需要直接關閉最左邊的關鍵幀圖標即可。
3. 關鍵幀緩動
大家都知道，動畫是有曲線的，特定的曲線設置會使得動畫的速率和節奏都發生相應的改變。
在 UI 動效製作中，大家可以選中需要調整的動畫關鍵幀圖層，然後單擊「曲線面板開關」按鈕 ，激活「曲線」面板，如圖所示。
激活「曲線」面板
在「曲線」面板中，選中需要調整的動畫關鍵幀。然後單擊滑鼠右鍵，在彈出的菜單中選擇最後的 「Keyframe Assistant」（輔助關鍵幀）選項，而此時展開的二級菜單中就是控制動畫緩動或者緩出的一些預設選項，通過這些選項，可以調節動畫的「進場」和「出場」速率。設置完成之後，如果關鍵幀小點的外形變成了沙漏狀，則說明已經設置緩動成功，如圖所示。
調整動畫關鍵幀
Easein/out 選項說明如下。
EaseIn：緩動效果發生在剛開始的時候。
EaseOut：緩動效果發生在結束之前。
EaseInOut：開始和結束時，都會發生緩動。
曲線動畫效果的製作
因為「曲線動畫」本身就是非常龐大的一個知識體系。我不希望在這裡佔用較大的篇幅為大家一一講解曲線動畫效果製作中會使用到的每一個功能，如此講解不僅效率不高，而且實戰性不強。
所以經過再三思考，我決定從各種動畫的曲線會產生相對應的效果入手，結合一些基本案例給大家講解一下，更多的是希望大家能主動去嘗試，並且通過基礎的練習能夠舉一反三，而絕不是僅僅停留在該效果的製作上。
1. 什麼是曲線動畫
這裡我們所說的動畫曲線，不是指 After Effects 的曲線面板，而是指所有動畫曲線的普遍規律，且不僅僅限於 After Effects 這個軟體。我們先來認識一下動畫曲線。
這裡，我們來看一個有關動畫曲線的二維軸向圖，如圖所示。首先我們假設圖中的 A 和 B 分別為動畫的起始和結束階段，不管這是什麼動畫類型與效果（如旋轉、變形、爆炸以及 Mask 動畫等）。此時，圖中橫向的箭頭代表時間維度，即完成這個 A-B 的動畫所需要消耗的時間長度（通常以 ms、 s 為單位）；圖中縱向的箭頭代表的是動畫效果的進度，比方說某物體從 0 個單位移動到 100 個單位，那麼這時縱向線的底部就是 0 個單位（起始進度），而頂部就是 100 個單位（結束進度）。
動畫曲線的二維軸向圖
同時，在動畫播放過程中由於時間是在不停地進行著的，所以動畫的效果也是隨著時間的推移而不斷地發生變化的，動畫效果會和時間維度在每一個位置上都產生一個交點，當所有的交點連接起來，就形成了中間的漸變色軌跡，而這條軌跡就是我們所說的動畫曲線，如圖所示。
漸變色軌跡
2. 如何調整動畫曲線
針對該知識點，我們還以之前講到過的「小白球」為例。這裡先選擇給小白球設定一個 Scale（縮 放）動畫，然後選擇已經創建好的兩個關鍵幀點的屬性圖層，同時單擊進入曲線面板（曲線面板位於圖中 2 號標記處），如圖所示。
激活曲線面板
在單擊進入曲線面板前，一定要先選中關鍵幀點的屬性圖層，否則進入曲線面板時將不會顯示相應的內容。
當單擊滑鼠進入到曲線面板時，在編輯界面中會先看到一根線條，這是默認情況下的動畫線條。此時，用滑鼠選中這根動畫線條的兩個端點（也可以單獨選擇任何一個點），然後單擊曲線面板右下角的 Easy Ease 、Easy Ease in 和 Easy Ease out 3 個按鈕的其中任何一個按鈕，便可以激活曲線的調節手柄， 如圖所示。
激活曲線手柄
接下來，針對一些常見的曲線規律和效果做一下相應的介紹。
先看圖，這是關於 Scale（縮放動畫）的9個常見的動畫效果，假設動畫的最小極限值為0， 最大極限值為 100。
曲線A：典型的純線性運動。因為沒有任何曲線弧度，所以不存在運動速率的改變，是勻速的從 0~100 縮放動畫。
曲線 B：典型的 Ease in 和 Ease out 動畫曲線樣式。起始階段呈弧線上揚，表明啟動速度是由慢到快的；中間階段近乎是一段直線，表明中間階段是相對勻速的運動；結束階段是從上揚曲線歸於水平線，從水平線往後是靜止狀態，效果表現為運動速度逐漸減緩，達到最小值 0，然後靜止。
曲線C：典型的 Ease in 曲線樣式。速度逐漸增大，直至動畫完成，達到最小值0，然後完全靜止。
曲線 D：典型的 Ease out 曲線樣式。速度逐漸減小，直至動畫完成，達到最小值 0，然後完全靜止。
曲線 E：勻速柔和的正反向動畫。起始階段呈弧線上揚，動畫由慢到快柔和加速；中間階段到達曲線頂點，表明到達了縮放動畫的最大值 100；頂點一過，呈現柔和加速狀態從 100 向 0 進行縮小動畫；結束階段曲線從峰值 100 逐漸歸於水平線（縮放效果趨近於最小值 0），從水平線往後，是靜止狀態， 效果表現為運動速度逐漸減緩，達到最小值 0，然後完全靜止。
曲線 F：先急速放大至最大值，再逐漸減速縮小。起始階段呈弧線急速上揚，短時間內迅速放大到 最大值（頂點位置）；中間階段頂點一過，開始縮小，呈現逐漸緩慢的減速狀態從 100 向 0 進行縮小動畫；結束階段速度逐漸減緩，達到最小值 0，然後完全靜止。
曲線 G：和曲線 F 完全反向。
曲線 H：彈性運動，速度和動畫值逐漸減緩，直至完全靜止。起始階段弧線急速上揚，短時間內迅 速放大到最大值（頂點位置）；中間階段頂點一過，開始縮小，然後每次曲線頂點依次降低，整體呈現 衰弱趨勢；結束階段速度逐漸減緩，達到最小值 0，然後完全靜止。
曲線 I：彈性運動，速度和動畫值逐漸減緩，直至完全靜止。起始階段弧線柔和加速上揚（Ease in 效果），然後柔和到達頂點位置；中間階段頂點一過，是一條直線，這時，意味著保持現有的動畫狀態， 並且持續到下一個頂點位置。效果表現為物體暫時在最大值階段完全靜止；結束階段速度柔和減弱，直至動畫完成，達到最小值 0，然後完全靜止。
9 個常見的動畫效果
需要強調的一點是，實戰中的動畫曲線千變萬化，但是我們一旦掌握了曲線的核心要義，就能做到「萬變 不離其宗」。針對動畫曲線的練習，一般反覆練習到一定的時間階段，就可以總結出其大概的運動規律了。
TAG:零設計 |