講述了軟件與軟件之間的切合關(guān)系，了解軟件之間是怎么相互作用做出一個(gè)動(dòng)畫來的。

今天向大家展示一個(gè)動(dòng)畫從無到有的過程，講述一些陌生的概念。特別適合新手閱讀，而這個(gè)教程也講述了軟件與軟件之間的切合關(guān)系，了解軟件之間是怎么相互作用做出一個(gè)動(dòng)畫來的。先來看一個(gè)效果圖。

工具

今天這個(gè)動(dòng)畫用到的工具都是ADOBE公司的AI、AE和PS。簡單來講就是用AI繪畫矢量圖像導(dǎo)到AE制作動(dòng)畫再導(dǎo)到PS中制作GIF格式的過程。過程很簡單，但是牽扯到三個(gè)軟件之間的相互作用。然而這都并不是我想說的，很多時(shí)候我們看到一個(gè)效果很棒的交互動(dòng)畫都會(huì)很自然的問這是用什么軟件做成的。軟件只不過是一個(gè)輔助工具，其實(shí)這個(gè)那么簡單完完全全可以用FLASH做甚至連PPT也可以實(shí)現(xiàn)，而我希望真正能做到的是我們的內(nèi)心，我們的思考方式，我們的靈感能不能想到這么一個(gè)簡單的動(dòng)畫。

先思考

以這個(gè)動(dòng)畫為例，我們先思考他的構(gòu)造。一個(gè)藍(lán)色背景、兩個(gè)看書的人物和一句標(biāo)語，而人物就是用線條以及填充色構(gòu)成。

再動(dòng)手

打開AI，新建一個(gè)900PX*200PX的畫布。用矩形工具畫出一個(gè)900*200PX大小的背景圖。顏色填充#91d3f9。然后按快捷鍵Ctrl+2鍵鎖定這個(gè)背景圖層。以左邊的人物為例，我們來拆分一下這個(gè)人物的構(gòu)造。可以看出這個(gè)人物是由圓形和方形裁減或者合并得來的，可以拆解如下圖。

一個(gè)個(gè)圖層疊加可以得到這樣的圖形。相應(yīng)的右邊的人物也可以拆解為簡單的圓形和方形。

加上一些文字。例如我們公眾號的使命“看技術(shù)、品產(chǎn)品、悟人生”就大功告成了

接著我們按動(dòng)效結(jié)構(gòu)切圖，導(dǎo)出相應(yīng)的圖片。這個(gè)很簡單，你只要看到他那一部分是需要做動(dòng)效的就單獨(dú)分開切出來。比如像本教程的人物和文字都有不同程度的變化著。第一個(gè)人物眨眼睛，那么我們就需要把眼睛和整個(gè)人物分開；中間文字閃動(dòng)屬于一個(gè)整體也需要單獨(dú)分開；第二個(gè)人物帽子和頭部都有不同程度的“運(yùn)動(dòng)”，所以分成帽子、頭部和身體三部分。如下圖

我們將他分成①-⑥六個(gè)部分，以更好的管理分類制作動(dòng)效。

接著到AE上場了。我們打開AE軟件，新建一個(gè)項(xiàng)目，然后新建合成。合成名稱：歡迎動(dòng)畫，這個(gè)我要強(qiáng)調(diào)一下，很多新手沒有怎么一個(gè)習(xí)慣給項(xiàng)目一個(gè)名稱導(dǎo)致之后的命名非常的亂。寬度900PX高度200PX跟AI畫布一樣。幀數(shù)率25幀每秒，這里幀速率可以理解為一秒有25張圖片。為什么要那么多大呢，因?yàn)槲蚁胱龀鰜淼膭?dòng)畫效果顯得非常流暢，時(shí)間只要5S就行了，因?yàn)槲抑谱鞯倪@個(gè)動(dòng)畫就是5S循環(huán)一次。

新建形狀圖層，然后用形狀工具拉一個(gè)跟畫布一樣大小的矩形，填充顏色為#91d3f9，命名為bg（背景圖）并將其圖層鎖定。然后把之前的切圖導(dǎo)如素材庫。由下往上按①-⑥的順序拖到合成里面，并借助輔助線的形式按原來的位置大概擺放整齊。

ok，我們來局部分析動(dòng)畫的原理。首先是左邊的人物眨眼睛。其實(shí)只要控制眼睛的不透明度就可以解決了。睜眼不透明度100%，閉眼不透明度0%，只要控制好時(shí)間就能達(dá)到眨眼睛的效果。如圖

第一個(gè)關(guān)鍵幀不透明度100%，第二個(gè)關(guān)鍵幀0%，第三個(gè)關(guān)鍵幀100%就會(huì)形成睜閉睜的效果即眨眼睛。

第二個(gè)人物有個(gè)“抬頭抬帽子”的效果，其實(shí)只是發(fā)生的位移的變化而已。但是特別要注意的是這兩個(gè)的位移是一樣但是時(shí)間有錯(cuò)落所以才會(huì)形成帽子比頭慢一點(diǎn)下落的效果。

頭和帽子第一個(gè)關(guān)鍵幀都是原來的位置，第二個(gè)關(guān)鍵幀就是垂直發(fā)生了位移，位移多少就要看示效果而定了。我這里的設(shè)置是由原來的60變成了58px，即是垂直移動(dòng)了2個(gè)像素。第三個(gè)關(guān)鍵幀是回到原點(diǎn)，那么我們只要逐個(gè)復(fù)制第一幀就行了。特別要注意的是帽子的第三幀要往后移動(dòng)一點(diǎn)點(diǎn)，行成錯(cuò)落感。

然后有點(diǎn)難理解的就是中間的文字的閃動(dòng)。他是如何做成的呢？用“蒙版”就行了。這個(gè)“蒙版”在PS里叫做剪切蒙版而在AE里就叫Alpha遮罩。原理很簡單，局部顯示要顯示的部位。我們再建立一個(gè)形狀圖層。在形狀圖層上建立一個(gè)大于畫布的矩形，旋轉(zhuǎn)15度如圖

然后把這個(gè)形狀圖層拖動(dòng)到文字圖層③下面（一定要是文字文字圖層③下面）。然后在選擇Alpha遮

罩“③.png"，就能形成”蒙版“效果了。剩下的就是給這個(gè)蒙版做位移打關(guān)鍵幀。

當(dāng)然這里還需要復(fù)制一個(gè)文字圖層③作為文字閃動(dòng)之后的一個(gè)文字漸顯的效果，還是給他打不透明度由0%到100%關(guān)鍵幀的效果。第一個(gè)關(guān)鍵幀為0%，第二個(gè)關(guān)鍵幀也為0%，第三個(gè)關(guān)鍵幀為100%。

再錯(cuò)開一下時(shí)間就會(huì)形成效果圖的效果了。

最后一步就是導(dǎo)出文件到PS。這里把文件放置到渲染列隊(duì)，導(dǎo)出的文件可以各不相同，但是我個(gè)人的做法是導(dǎo)出PNG文件序列。這樣做的好處是文件較小，方便導(dǎo)出。接著添加一個(gè)文件夾用于存放你的PNG序列。

最后就是PS登場了。這里PS沒有起多大的作用，只是做了一個(gè)格式的轉(zhuǎn)換和設(shè)置循環(huán)播放圖片的效果，但是少了這一步也是完成不了的。

我們打開PS，然后打開保存的文件序列的文件夾，導(dǎo)入AE中導(dǎo)出的序列到PS當(dāng)中。導(dǎo)入的同時(shí)幀速率設(shè)置跟AE一致25幀/秒，以保持最終效果的一致性。

接著按ctrl+shift+alt+s或者點(diǎn)擊文件>導(dǎo)出>存儲(chǔ)為web所用格式。這里要注意兩個(gè)設(shè)置。一個(gè)是文件保存為gif格式，一個(gè)是動(dòng)畫循環(huán)選項(xiàng)設(shè)置為永遠(yuǎn)，這樣gif圖片就可以永久循環(huán)下去。

總結(jié)

設(shè)計(jì)一個(gè)動(dòng)效乃至于做什么事情。先明確業(yè)務(wù)需求，就是先要明確你要做成什么效果的目的和做成后想要達(dá)到的目的目標(biāo)，再將這個(gè)業(yè)務(wù)需求轉(zhuǎn)化為用戶需求，用戶看到這個(gè)之后想要干嘛。再形成影響用戶做這個(gè)事情的關(guān)鍵因素是什么會(huì)不會(huì)引導(dǎo)不到位乃至于誤導(dǎo)用戶的操作與識(shí)別。當(dāng)這一切都解決之后才是對這個(gè)動(dòng)效或者事情做分析。分析他的布局分析他的結(jié)構(gòu)，最后把需求效果拆分為一個(gè)個(gè)簡單的圖形或者顏色以達(dá)到設(shè)計(jì)的目的。