AE 動(dòng)畫(huà)只會(huì)用“緩動(dòng)”運(yùn)動(dòng)曲線？流利說(shuō)的專業(yè)動(dòng)畫(huà)師餅哥教你如何把握好動(dòng)畫(huà)節(jié)奏。

導(dǎo)言

本文是關(guān)于動(dòng)畫(huà)曲線的探究，將從為什么探究動(dòng)畫(huà)運(yùn)動(dòng)曲線、如何在 AE 中調(diào)動(dòng)畫(huà)曲線、動(dòng)畫(huà)曲線的總結(jié)和應(yīng)用、曲線的應(yīng)用實(shí)例幾個(gè)方面展開(kāi)。

為什么會(huì)有這篇分享？

發(fā)現(xiàn)大家很多時(shí)候都沒(méi)調(diào)動(dòng)畫(huà)曲線的習(xí)慣；對(duì)于曲線的認(rèn)識(shí)停留在“F9”打個(gè)緩動(dòng)（在用 AE 制作動(dòng)畫(huà)時(shí)），會(huì)感覺(jué)自己的動(dòng)畫(huà)怎么做不了別人那樣生動(dòng)又自然；

一個(gè)動(dòng)畫(huà)好不好，動(dòng)畫(huà)節(jié)奏至關(guān)重要，而動(dòng)畫(huà)運(yùn)動(dòng)曲線就是用來(lái)控制動(dòng)畫(huà)節(jié)奏的工具，大部分設(shè)計(jì)軟件都會(huì)提供調(diào)節(jié)運(yùn)動(dòng)曲線的工具。包括但不限于 AE、Pr、C4D、Spine 等。

我們可以先看下比較好的動(dòng)畫(huà)節(jié)奏是什么樣：

△ Flatwhite 平白工作室

由于在調(diào)節(jié)動(dòng)畫(huà)曲線的時(shí)候，關(guān)鍵幀常常會(huì)發(fā)生一些變化，所以我們可以先從關(guān)鍵幀開(kāi)始說(shuō)：

關(guān)鍵幀

在調(diào)節(jié)動(dòng)畫(huà)曲線的時(shí)候，時(shí)間軸上的關(guān)鍵幀會(huì)有不同的形狀，所以理解不同的形狀代表的意義可以反向理解動(dòng)畫(huà)曲線；

• 菱形：代表關(guān)鍵幀直接動(dòng)畫(huà)的速度為勻速
• 漏斗型：兩關(guān)鍵幀速度由零到快又到零
• 箭頭：速度到這個(gè)關(guān)鍵幀緩緩變?yōu)榱?/li>
• 圓形：是指三個(gè)關(guān)鍵幀中間那個(gè)為圓形的話會(huì)將這三個(gè)關(guān)鍵幀形成的兩段不同速度進(jìn)行柔緩連接
• 正方形：定格關(guān)鍵幀，需要設(shè)置凍結(jié)畫(huà)面時(shí)間的時(shí)候會(huì)用到
• 凸三角：一半是線性，一半是定格
• 凹三角：一半是緩動(dòng)，一半是定格

曲線的種類

速度曲線（v-t）：速度曲線是表現(xiàn)時(shí)間與速度之間關(guān)系的曲線，我們可以通過(guò)曲線的“舒緩度”直觀的看到和調(diào)節(jié)動(dòng)畫(huà)節(jié)奏，曲線越舒緩速度越慢，越陡峭越快；

值曲線（s-t）：值曲線又叫做路程曲線，即路程與時(shí)間關(guān)系之間的曲線，曲線切線斜率越大速度越快，斜率越小速度越慢；

速度曲線和值曲線的關(guān)系和理解，B 站等平臺(tái)有很多博主都做了詳盡的解釋，由于本文的重心還是在曲線的應(yīng)用上，所以不過(guò)多展開(kāi)。

由于平時(shí)我們動(dòng)畫(huà)的主要工具是 AE，在 AE 中我們大多數(shù)動(dòng)畫(huà)師更習(xí)慣用速度曲線，所以接下來(lái)都是默認(rèn)以速度曲線為探究對(duì)象。

動(dòng)畫(huà)曲線

對(duì)于運(yùn)動(dòng)曲線無(wú)非可以總結(jié)為：緩動(dòng)、緩入、緩出，繁多復(fù)雜的各種曲線都可以歸納進(jìn)去；

緩入（先快后慢）曲線先是陡峭再變得舒緩

緩出（先慢后快）曲線先舒緩再突然變得陡峭

緩動(dòng)（慢進(jìn)慢出）其實(shí)按 F9 默認(rèn)的曲線（默認(rèn)的拋物線）就是一種緩動(dòng)了，但默認(rèn)的這條拋物線在實(shí)際的動(dòng)畫(huà)制作中還不夠，為了動(dòng)畫(huà)更有節(jié)奏，需要我們把中間和兩端的陡峭度的對(duì)比調(diào)的更強(qiáng)烈，即兩邊更舒緩，中間更陡峭。

動(dòng)畫(huà)曲線的應(yīng)用

緩入一般可以用在出現(xiàn)的時(shí)候；也就是一個(gè)鏡頭開(kāi)始的時(shí)候，或者某個(gè)物體出現(xiàn)的時(shí)候，下圖中，由小放大的兩個(gè)圓、彈起的硬幣、建筑物都是快速出現(xiàn)，然后緩緩?fù)Ｏ?/p>

△ 流利說(shuō)商務(wù)英語(yǔ)課程動(dòng)畫(huà)

緩出一般可以用在消失的時(shí)候；也就是鏡頭畫(huà)面結(jié)束需要移出時(shí)，或者某個(gè)圖形消失的時(shí)候，下圖中，人物打字的畫(huà)面緩緩移動(dòng)，然后快速消失

△ 流利說(shuō)?商務(wù)英語(yǔ)課程動(dòng)畫(huà)

緩動(dòng)類型的曲線一般可以用在中間表演的時(shí)候；即圖形或主體已經(jīng)在畫(huà)面中，這個(gè)時(shí)候?yàn)榱藞D形運(yùn)動(dòng)自然流暢，適合用兩邊慢中間快的曲線，圖形運(yùn)動(dòng)前后緩沖時(shí)間越長(zhǎng)，節(jié)奏越強(qiáng)烈；

△ 流利說(shuō)?Kion 英語(yǔ)

△?Flatwhite 平白工作室

總結(jié)一下，就是開(kāi)始出現(xiàn)用緩入，結(jié)束消失用緩出，中間表演用緩動(dòng)。當(dāng)然，實(shí)際應(yīng)用中曲線遠(yuǎn)比上面提到的復(fù)雜，需要根據(jù)實(shí)際情況調(diào)節(jié)曲線的弧度，從而影響動(dòng)畫(huà)節(jié)奏。

如何在實(shí)際案例中運(yùn)用動(dòng)畫(huà)曲線

實(shí)際的動(dòng)畫(huà)制作中都是這些曲線的綜合運(yùn)用，比如下面的方塊彈出再消失，我設(shè)置了一個(gè)方塊進(jìn)場(chǎng)、緩沖靜止、離場(chǎng)的動(dòng)畫(huà)。

按“P”，給方塊的位置屬性 K 關(guān)鍵幀，選中所有關(guān)鍵幀，右鍵“關(guān)鍵幀差值”，把空間插值改為線型；

然后會(huì)發(fā)現(xiàn)動(dòng)畫(huà)比較平均僵硬，沒(méi)有節(jié)奏感。

所以，接下來(lái)就需要調(diào)節(jié)動(dòng)畫(huà)曲線，在這之前我們可以先分析方塊整個(gè)動(dòng)畫(huà)的運(yùn)動(dòng)，這個(gè)動(dòng)畫(huà)雖然簡(jiǎn)單，但卻包含了我們前面說(shuō)的三個(gè)過(guò)程（出現(xiàn)-中間表演-消失），方塊彈出即出現(xiàn)，方塊沖高回落的緩沖則屬于中間表演，落下即是消失，

于是，我們可以把曲線按照上述調(diào)整為這樣：

現(xiàn)在動(dòng)畫(huà)已經(jīng)有運(yùn)動(dòng)節(jié)奏了，效果比之前好很多

為了動(dòng)畫(huà)更豐富，可以再上個(gè)旋轉(zhuǎn)的動(dòng)畫(huà)，然后調(diào)整下旋轉(zhuǎn)屬性的動(dòng)畫(huà)曲線（下圖綠色曲線）：

為了效果更好，加上殘影效果和彈跳（motion2 自帶彈跳）

得到最終效果

總結(jié)

本文概括性的總結(jié)和三類不同的運(yùn)動(dòng)曲線的應(yīng)用情景，快速幫助大家掌握AE動(dòng)畫(huà)曲線，不過(guò)要把握好動(dòng)畫(huà)節(jié)奏，還需要掌握必要的動(dòng)畫(huà)規(guī)律，以及多多練習(xí)，在實(shí)踐中感受動(dòng)畫(huà)運(yùn)動(dòng)曲線對(duì)于動(dòng)畫(huà)化的影響。最后，希望能夠?qū)Υ蠹矣兴鶐椭?/p>

最后，獻(xiàn)上流利說(shuō)?動(dòng)畫(huà)組做的精美動(dòng)畫(huà)：https://v.qq.com/x/page/j316226bpky.html

歡迎關(guān)注「流利說(shuō)設(shè)計(jì)團(tuán)隊(duì)」公眾號(hào)：