發(fā)布時(shí)間:2019年03月02日
動(dòng)畫師用AE是怎么來(lái)制作動(dòng)畫的呢,AE動(dòng)畫制作流程一起來(lái)了解:
AE動(dòng)效合集
大家可以在附件中下載文件,參考一下文件的結(jié)構(gòu)。 里面有Material各種組件,基線UI還有導(dǎo)航過(guò)渡。
導(dǎo)入素材
做動(dòng)畫沒(méi)有素材怎么行? 我們隊(duì)里面設(shè)計(jì)師們的主要設(shè)計(jì)工具是Sketch,默認(rèn)情況下是不能直接導(dǎo)入AE的。 還好有鬼才Adam
Ploff開(kāi)發(fā)的AEUX這個(gè)插件(也在附件里面哦),可以直接從Sketch往AE里導(dǎo)素材。大家可以在這個(gè)動(dòng)效合集里面的組件夾里看到我用這個(gè)插件導(dǎo)入的所有Material組件。
一點(diǎn),一拽,一松手, Material界面馬上有!
新建一個(gè)Composition(合成組),大家可以直接從組件(Components)里拉出相應(yīng)的組件來(lái)搭建界面。
直接把組件從Project里拉進(jìn)Composition里面就好啦。
組件定制
大家可以通過(guò)改變這些基線UI的參數(shù)來(lái)創(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修改過(guò)的組件們組成的。
制作過(guò)渡
UI界面組建流程說(shuō)的差不多了,該開(kāi)始做動(dòng)畫啦。大家可以在Navigation
Transitions(導(dǎo)航過(guò)渡)里看到一些符合Material動(dòng)效原理的范例。如果你對(duì)Material動(dòng)效原理感興趣,可以看看我上一篇文章《動(dòng)效不該難》。
符合Material動(dòng)效原理的導(dǎo)航過(guò)渡。
在組件的composition里面,一開(kāi)始先不要在動(dòng)畫關(guān)鍵幀上面加任何的緩和效果(Easing)。然后在Parent
Composition里再利用Time Remapped和緩和調(diào)試動(dòng)畫。
這樣能使動(dòng)畫的調(diào)試變得更加有效率,因?yàn)槟阒挥谜{(diào)整一對(duì)兒關(guān)鍵幀,這種緩和也是覆蓋著過(guò)渡整體,這樣省去了要進(jìn)入組建composition里面,調(diào)試很多不同圖層的各種關(guān)鍵幀的緩和效果所浪費(fèi)的時(shí)間。
界面與界面過(guò)渡的中往往有這四種元件:進(jìn)入元件(Incoming elements);退出元件(Outgoing
elements);頑固元件(Persistent elements)以及靜止元件(Static
elements)。像從聯(lián)系人欄打開(kāi)詳細(xì)界面的這種復(fù)雜過(guò)渡,需要更加細(xì)致嚴(yán)密的動(dòng)效。我們可以把這種過(guò)渡以變化速度最高的時(shí)刻為節(jié)點(diǎn)把前后分成兩個(gè)部分。頑固元件會(huì)走完這個(gè)緩和曲線,退出元件會(huì)在速度最高點(diǎn)的時(shí)候消失,進(jìn)入元件在減速的過(guò)程中漸入。這就是Material里面的’復(fù)雜型過(guò)渡’。
第一部分:退出元件消失;
第二部分:進(jìn)入元件漸入;
過(guò)渡整體:頑固元件轉(zhuǎn)變。
加速部分和減速部分的時(shí)長(zhǎng)比例是3比7。比如退出元件消失用了90ms,那么進(jìn)入元件漸入時(shí)長(zhǎng)則是210ms。動(dòng)圖中紫色是頑固元件的過(guò)渡,橘色則是退出元件以及進(jìn)入元件。
這個(gè)方法可以作出絕大部分符合Material動(dòng)效原理的過(guò)渡,而且不用擔(dān)心例子之間的統(tǒng)一性。
當(dāng)然啦,那種更加復(fù)雜的,酷炫的過(guò)渡,估計(jì)這個(gè)方法就搞不定啦。
AE不管怎么樣還是一個(gè)靈活度非常大的動(dòng)畫制作工具,每個(gè)人都有自己最舒服的制作流程,沒(méi)有哪種是‘完全正確的’。
希望我的流程可以給大家?guī)?lái)一些點(diǎn)子,讓你們變成更有效率的動(dòng)效設(shè)計(jì)師!