動(dòng)畫師用AE是怎么來制作動(dòng)畫的呢？AE動(dòng)畫制作流程一起來了解

動(dòng)畫師用AE是怎么來制作動(dòng)畫的呢，AE動(dòng)畫制作流程一起來了解：

　　AE動(dòng)效合集

　　大家可以在附件中下載文件，參考一下文件的結(jié)構(gòu)。 里面有Material各種組件，基線UI還有導(dǎo)航過渡。

　　導(dǎo)入素材

　　做動(dòng)畫沒有素材怎么行? 我們隊(duì)里面設(shè)計(jì)師們的主要設(shè)計(jì)工具是Sketch，默認(rèn)情況下是不能直接導(dǎo)入AE的。 還好有鬼才Adam Ploff開發(fā)的AEUX這個(gè)插件(也在附件里面哦)，可以直接從Sketch往AE里導(dǎo)素材。大家可以在這個(gè)動(dòng)效合集里面的組件夾里看到我用這個(gè)插件導(dǎo)入的所有Material組件。

　　一點(diǎn)，一拽，一松手， Material界面馬上有!

　　新建一個(gè)Composition(合成組)，大家可以直接從組件(Components)里拉出相應(yīng)的組件來搭建界面。

　　直接把組件從Project里拉進(jìn)Composition里面就好啦。

　　組件定制

　　大家可以通過改變這些基線UI的參數(shù)來創(chuàng)造不同樣式的組件。這里，我們就得用到AE里強(qiáng)大的Master properties(AE CC2018以后的都有)啦。這個(gè)功能其實(shí)很容易被忽略，但它其實(shí)非常有用，使得我們不用不斷重復(fù)的去復(fù)制Compositions，只要在圖層菜單里面做一些修改就好啦。 舉個(gè)栗子，像動(dòng)圖里面的這個(gè)應(yīng)用欄，它的顏色，陰影，圖標(biāo)經(jīng)常需要變動(dòng)，所以我在Master Properties里面加入了這三項(xiàng)。

　　用Master Properties修改一個(gè)組件。

　　用有Master Properties的組件，我能夠迅速的組建出一系列的界面。你們可以看看在Baseline UIs(基線組件)里面的例子。

　　這些界面都是拿經(jīng)Master Properties修改過的組件們組成的。

　　制作過渡

　　UI界面組建流程說的差不多了，該開始做動(dòng)畫啦。大家可以在Navigation Transitions(導(dǎo)航過渡)里看到一些符合Material動(dòng)效原理的范例。如果你對(duì)Material動(dòng)效原理感興趣，可以看看我上一篇文章《動(dòng)效不該難》。

　　符合Material動(dòng)效原理的導(dǎo)航過渡。

　　在組件的composition里面，一開始先不要在動(dòng)畫關(guān)鍵幀上面加任何的緩和效果(Easing)。然后在Parent Composition里再利用Time Remapped和緩和調(diào)試動(dòng)畫。 這樣能使動(dòng)畫的調(diào)試變得更加有效率，因?yàn)槟阒挥谜{(diào)整一對(duì)兒關(guān)鍵幀，這種緩和也是覆蓋著過渡整體，這樣省去了要進(jìn)入組建composition里面，調(diào)試很多不同圖層的各種關(guān)鍵幀的緩和效果所浪費(fèi)的時(shí)間。

　　界面與界面過渡的中往往有這四種元件：進(jìn)入元件(Incoming elements);退出元件(Outgoing elements);頑固元件(Persistent elements)以及靜止元件(Static elements)。像從聯(lián)系人欄打開詳細(xì)界面的這種復(fù)雜過渡，需要更加細(xì)致嚴(yán)密的動(dòng)效。我們可以把這種過渡以變化速度最高的時(shí)刻為節(jié)點(diǎn)把前后分成兩個(gè)部分。頑固元件會(huì)走完這個(gè)緩和曲線，退出元件會(huì)在速度最高點(diǎn)的時(shí)候消失，進(jìn)入元件在減速的過程中漸入。這就是Material里面的’復(fù)雜型過渡’。

　　  第一部分：退出元件消失;

　　第二部分：進(jìn)入元件漸入;

　　過渡整體：頑固元件轉(zhuǎn)變。

　　加速部分和減速部分的時(shí)長比例是3比7。比如退出元件消失用了90ms，那么進(jìn)入元件漸入時(shí)長則是210ms。動(dòng)圖中紫色是頑固元件的過渡，橘色則是退出元件以及進(jìn)入元件。

　　這個(gè)方法可以作出絕大部分符合Material動(dòng)效原理的過渡，而且不用擔(dān)心例子之間的統(tǒng)一性。 當(dāng)然啦，那種更加復(fù)雜的，酷炫的過渡，估計(jì)這個(gè)方法就搞不定啦。

　　AE不管怎么樣還是一個(gè)靈活度非常大的動(dòng)畫制作工具，每個(gè)人都有自己最舒服的制作流程，沒有哪種是‘完全正確的’。 希望我的流程可以給大家?guī)硪恍c(diǎn)子，讓你們變成更有效率的動(dòng)效設(shè)計(jì)師!