新人入門！12條動畫法則+常用動畫曲線解析

今天我們來聊一聊動畫法則與動畫曲線，做動效不但要遵循物理規(guī)律還要結合人們的視覺體驗，想讓動效更自然更符合實際，對于動畫法則與動畫曲線的學習是必不可少的，希望此篇文章能幫助到你~

首先我們說一說動畫法則，動畫有 12 項基本法則，源自于迪士尼動畫師經(jīng)累積數(shù)十年的動畫制作經(jīng)驗所整理出來的，我們逐一來分析學習。

擠壓與拉伸

當有力作用到物體身上時，物體將會產(chǎn)生一定的形變，比如你在拍球時，球落地后會被擠壓，彈起時會產(chǎn)生拉伸，對于具體的擠壓與拉伸的強度，與物體的硬度和用力的大小有關。做動畫要遵循運動規(guī)律讓動畫更自然。

如下圖小球的彈跳，左側是無擠壓與拉伸的效果，右側是加入擠壓與拉伸后的效果，明顯右側更自然一些。

從擠壓與拉伸的程度上，我們還可以看出物體的硬度，擠壓與拉伸的程度越明顯，物體越柔軟，反之，物體越硬。如下圖我們做一個夸張點的對比，可以看出右側小球硬度更高一些。

預備動作

當物體要發(fā)生運動或者人物要做動作之前會有一個預備動作，比如向前方扔東西，一般都會抬手向后然后再向前。或者人在跳高之前會先下蹲發(fā)力，然后再高高跳起，做動畫也是一樣，預備動作可以讓用戶知道即將發(fā)生什么。例如下圖中的藍色小球會看起來更有活力和沖勁。

布局

staging 是表演；展現(xiàn)；分階段進行；籌劃的意思，我們可以理解為布局或者構圖，例如看動畫時，有些表達人物特性的畫面會靜止幾秒，有些場景素材過于復雜的地方會對突出的人物打聚光燈，來引導用戶的視覺走向。

連續(xù)與關鍵

我們可以理解成是兩種動畫制作方法，第一種是連續(xù)，也就是根據(jù)連續(xù)的動作逐一來制作每一幀的畫面；第二種叫做關鍵，也就是先制作好關鍵的動畫，然后再制作關鍵動畫之間的畫面。（連續(xù)與關鍵適用于手繪動畫，而用 AE 或者一些動畫軟件在制作時可以結合使用）舉個例子，比如你想做由于矩形逐步變幻成三角形的動畫，如下圖：

跟隨動作與重疊動作

跟隨動作意思是動作的一個延續(xù)性，比如人物戴著紅領巾向前跑然后停止，在停止的時候，紅領巾是向前飄動的；重疊動作是指人物在運動的時候身體的關節(jié)并不是同一時間開始同一時間結束的，而是兩者有重疊，如果同時開始和結束的話會很機械。

緩入緩出

這個是最常用的動畫法則，后面的動畫曲線中也會詳細說明這部分的，因為所有物體從靜止到開始運動再到最后停止，都是一個逐步加速再逐步減速到停止的一個狀態(tài)，當然機械物體的運動除外，比如傳送帶上的貨物，就屬于勻速運動。

動作弧線

人物運動時會受到骨骼的影響，會呈現(xiàn)弧線運動，如果是直線運動就會生硬很多，舉個例子

如果你看到了很明顯的區(qū)別，卻還是不知道為什么的話，我們來這樣看：

是不是瞬間豁然開朗。

次要動作

次要動作我們可以理解為細節(jié)，主要是點綴主要動作的，比如用右手敲門，左手自然下垂，會給人感覺很放松，如果左手握拳會給人氣憤的感覺，如果眼睛四處張望看起來就比較像小偷，這里的左手和眼睛就屬于次要動作，可以豐富主要動作，但是不要太過，適當即可。

節(jié)奏

節(jié)奏可以使畫面更有張力。有快有慢，有急速，有慢鏡頭，這些都可以使畫面充滿節(jié)奏感，很平均的畫面就會很機械。

夸張

夸張是可以增加對用戶的吸引力的，和現(xiàn)實一模一樣不是最優(yōu)的選擇，合理的講動畫夸張化往往可以呈現(xiàn)出更好的效果。（可以用擠壓與拉伸，加快或放慢等等）

實體圖

可以理解為立體的形態(tài)，一個圓很平，但是立體的球就會有空間感，同時要保持畫面的平衡。

吸引力

畫面有創(chuàng)新，獨特，可以讓用戶過目不忘，吸引力強。

以上要合理的運用才會達到最好的效果，不要機械的使用。

更詳細的分析：

說完了動畫法則，我們看一下動畫曲線。

首先動畫曲線有什么作用？在哪里可以調節(jié)呢？動畫曲線可以實現(xiàn)對象運動的仿真效果，比如加速運動、減速運動、勻速運動、自由落體等等；在圖表編輯器中為某個屬性添加動畫時，可以在速度圖表中查看和調整動畫曲線，從而影響對象的變化速率，使其更真實。

正式學習動畫曲線之前我們先說一個小知識：

1. 關鍵幀

時間軸上的關鍵幀會有一些不同的形狀，關鍵幀圖標形態(tài)取決于關鍵幀之間的時間間隔的插值方法。當圖標的一半為深灰色時，顏色較深的一半表示這一側附近沒有關鍵幀，或者其插值由應用于前一關鍵幀的定格插值所取代。

我們一起來看下有幾種圖標類型

讓我們來一一解釋，先看最簡單的四個

2. 圓形：

自動貝塞爾曲線（對兩側速度不同的關鍵幀進行柔和的連接）下面動圖可以看出兩者的不同對比

3. 正方形:

定格（硬性變化）在文字變換動畫中常用

凹三角和凸三角都是停止關鍵幀，可以通過右鍵點擊切換保持關鍵幀來調整

凹三角是曲線關鍵幀轉換為停止關鍵幀后的狀態(tài)；凸三角是普通線性關鍵幀轉換為停止關鍵幀后的狀態(tài)

了解了關鍵幀之后我們來看看速度曲線與值曲線

最后我們來學習下動畫曲線，動畫曲線可以分為：線性動畫，緩入動畫，緩出動畫，緩入緩出動畫，我們逐一來舉例說明

4. 線性動畫（linear）

動畫從開始到結束一直是同樣的速度運動，也就是勻速直線運動，看起來不是很自然，例如現(xiàn)實生活中的傳送帶就是勻速直線運動。

5. 緩入動畫（ease-in） - 加速運動

動畫的速度先慢后快，動畫曲線先是陡峭再平緩，例如現(xiàn)實生活中汽車啟動，但是緩入動畫會在速度最快的時候停止，會很突然，有點像被磁鐵吸住的感覺。

6. 緩出動畫（ease-out）- 減速運動

與緩入動畫正好相反，緩出動畫的速度先快后慢，例如現(xiàn)實生活中汽車慢慢停止

7. 緩入緩出動畫（ease-in-out ）

速度由慢變快再變慢，例如現(xiàn)實生活中的汽車啟動加速到停止。但是默認的 F9 對于實際效果來講并不夠，還需要我們把對比調節(jié)的更強，如下圖我們可以看到調整前后的不同節(jié)奏感。

總結一下，單純的線性動畫與緩入動畫和緩出動畫并不太符合正常的運動規(guī)律；當緩入緩出動畫相互結合時才會更符合正常的運動規(guī)律，但是時間上的掌握也是需要慢慢琢磨的，希望此篇文章可以給你帶來一些啟發(fā)。