下篇教程地址：http://www.htnj110.cn/detail/589623.html

第一版作品鏈接： http://www.htnj110.cn/detail/557816.html

這是教程的上篇，講解以下3個圖標的做法：

——————— 貫穿整篇教程的重要知識點 ——————

毛玻璃效果就是被玻璃擋住的那部分會被模糊掉，而這種效果在Ae中我們將通過為調(diào)整圖層添加高斯模糊的效果來實現(xiàn)，如下圖所示。一定一定要注意圖層的順序?。。。。。。。。。。。?/span>

Ae中的調(diào)整圖層與Ps中的調(diào)整圖層類似，調(diào)整圖層將對該調(diào)整圖層下方所有圖層生效 （如上面案例中調(diào)整圖層的高斯模糊對圓和星星都產(chǎn)生了影響），但Ps可以通過創(chuàng)建剪切蒙版使調(diào)整層僅對緊挨著的下方一層起作用，Ae要做到這一點只能通過預(yù)合成來實現(xiàn)。明白了這一點，我們就可以知道調(diào)整圖層必須位于被毛玻璃遮擋物體圖層的上方。

由于只有在被遮擋時才會產(chǎn)生模糊效果，不被遮擋時物體還是清晰可見的，所以我們需要限制一下調(diào)整圖層的模糊范圍，那么就需要為調(diào)整圖層添加遮罩，而遮罩就是毛玻璃本身所覆蓋的區(qū)域。在Ae中，作為遮罩的圖層必須緊挨該圖層，且位于該圖層上方圖層。

但是，一旦該圖層成為了某一個圖層的遮罩，圖層前面的小眼睛就會關(guān)閉，也就意味著作為遮罩的這一圖層將不被顯示。所以我們必須將這個遮罩層復(fù)制一份作為可以被我們看到的那層半透的磨砂玻璃。但很多時候這快玻璃是需要添加動畫的，如下圖所示。

所以建議先將動畫完成后再復(fù)制一層作為遮罩的那個玻璃圖層，這樣遮罩和毛玻璃將會擁有相同的運動軌跡，然后我們再在合適的位置添加調(diào)整圖層。

所以正確的圖層順序如下，一定要牢牢掌握：

1、最終被我們看到的那層半透的磨砂玻璃位于最上方圖層（這個圖層最好在做完所有動畫后通過復(fù)制“模糊效果遮罩”得到）；

2、“模糊效果遮罩”位于調(diào)整圖層的上方，因為它需要作為調(diào)整圖層的遮罩；

3、調(diào)整圖層位于“模糊效果遮罩”的下方，并將“模糊效果遮罩” 作為調(diào)整圖層的遮罩，但位于被遮擋物體（星星和圓）圖層的上方圖層來對星星和圓產(chǎn)生高斯模糊的效果；

4、被毛玻璃遮擋的物體（星星和圓）位于調(diào)整圖層下方。

—————————— 準備工作 —————————— 

1、將圖標在Ai中分好圖層，命好名。我這里為了層次結(jié)構(gòu)更加清晰，將不同的圖標畫在了不同的畫板中然后將每個畫板存儲為了單獨的Ai文件，如下圖所示（這些文件已經(jīng)提供，可以在文末右下角點擊下載）。

2、將準備好的Ai文件導(dǎo)入Ae中。導(dǎo)入Ae后進入該合成中修改合成的幀率及合成時長，只需要進入該合成中使用快捷鍵Ctrl+K即可修改。我這里FPS 為30。

3、選中所有AI圖層，右鍵從矢量圖層創(chuàng)建形狀，然后刪除所有AI圖層，最好為每個圖層賦予一個有意義的名字便于識別。（之前由于只是練習(xí)也沒有準備出教程，所以命名有點隨意，但在這個教程中我會將上傳的命好名字的文件方便大家跟著教程學(xué)習(xí)。也會用盡可能少的圖層來簡化一些步驟）

下面我們以每個圖標為一個教程進行演示講解，也是為了大家思路能更清晰，文件的圖層及嵌套關(guān)系可以更簡潔。以上準備工作步驟將不再進行重復(fù)。如果不會導(dǎo)入或者不太明白的，先參考下我在知乎寫的這篇文章（就是下面那行綠色的鏈接 ）希望可以幫助到大家，也可以在評論區(qū)留言或私信問我。

關(guān)于Ai文件導(dǎo)入Ae可能遇到的問題及解決方案（不定期補充）

——————— 案例1：卡券(coupon) ———————

1、將Ai圖層轉(zhuǎn)換為形狀，添加文字圖層（這步可以不做）后如下圖所示。

2、先分析下這個動畫：需要做動效的有三個圖層，VIP、磨砂玻璃和副券，但實際只需要做磨砂玻璃和副券的動效就可以了，VIP作為磨砂玻璃的子級跟隨動畫就可以。磨砂玻璃以右上角為旋轉(zhuǎn)中心進行旋轉(zhuǎn)；副券則以右下角為旋轉(zhuǎn)中心進行旋轉(zhuǎn)然后掉落。里面所有動畫的彈性部分我們都用motion腳本來實現(xiàn)。

3、先將“VIP”綁定到它的父級“磨砂玻璃”，如下圖。

4、選中“磨砂玻璃”圖層，將錨點移動到右上角（可以手動調(diào)整也可以用motion調(diào)整）按r調(diào)出旋轉(zhuǎn)屬性，在第10幀K一幀，然后移動到第20幀，旋轉(zhuǎn)-30°再K一幀。然后選中這兩個關(guān)鍵幀，使用motion為該動畫添加興奮效果。如下圖。（再次為關(guān)鍵幀添加緩動也可以）

5、修改 “優(yōu)惠券”和“副券”圖層填充顏色為黃色漸變或任何你喜歡的顏色，可以調(diào)整漸變的起點終點使連接處無痕。

6、選中副券，修改錨點到右下角。按r調(diào)出旋轉(zhuǎn)屬性，在第18幀K一幀，然后移動到第30幀，旋轉(zhuǎn)-180°再K一幀。然后選中這兩個關(guān)鍵幀，使用motion為該動畫添加興奮效果。如下圖。 

7、然后對“副券”的位置進行K幀，制作撕裂后掉落的那瞬間。按P調(diào)出位置屬性，在第60幀K一幀，移動到65幀，然后將副券像下移動，這里我只修改了y方向的數(shù)值，然后再次K幀。（這里可以為位移加緩入效果，但是時間太短，區(qū)別不是很明顯）

8、至此所有動畫部分已經(jīng)制作完成。就需要用到開篇提到的那個知識點了，在合適的位置添加調(diào)整圖層，并為調(diào)整圖層設(shè)置遮罩。如下圖。在“磨砂玻璃”下方新建調(diào)整圖層，為其添加高斯模糊效果，調(diào)整到合適的數(shù)值；然后將“磨砂玻璃”作為調(diào)整圖層的遮罩，此時會發(fā)現(xiàn)“磨砂玻璃”圖層不再顯示；那么就需要再次復(fù)制一層“磨砂玻璃”，按T調(diào)出透明度，調(diào)整到一個合適的數(shù)值。

9、最終效果如下圖所示。

——————— 案例2：開燈(light) ———————

1、將Ai圖層轉(zhuǎn)換為形狀，并刪除原來Ai圖層后如下圖所示。

2、依然分析下這個動畫：隨著燈泡逐漸亮起（通過燈泡顏色的變化實現(xiàn)），表情也逐漸由面無表情變?yōu)槲⑿Γ車沫h(huán)境也被照亮（通過圓的縮放動畫實現(xiàn)），為了使動畫循環(huán)，又再次將燈泡熄滅一切都恢復(fù)原狀，燈泡逐漸熄滅的過程中，表情由微笑變?yōu)榫趩嗜缓笤僮優(yōu)槊鏌o表情，這次環(huán)境由亮變暗是通過圓的透明度來實現(xiàn)的。而光點散開像煙花的效果通過motion腳本的burst實現(xiàn)。而眨巴眼睛的動畫貫穿始終。

3、先制作燈泡亮起又熄滅的動畫，為“bulb”圖層的填充顏色K幀。第15幀和第1秒20幀，燈泡顏色為黃色，第0幀和第2秒05幀燈泡顏色為灰色。如下圖。

4、然后制作周圍環(huán)境變亮又變暗的動畫。復(fù)制“bulb”層，取消原來顏色動畫，并修改填充顏色為白色(在最后我覺得這個顏色太亮了將顏色改為了#555555），透明度為50%，置于“bulb”圖層下方，并修改圖層混合模式為添加。環(huán)境變亮是為該復(fù)制圖層的縮放K幀，第10幀縮放為0%，第24幀縮放為500%（這個大小要可以覆蓋整個“env”層）。環(huán)境變暗是為該圖層的透明度K幀，第1秒20幀的透明度為50%，第2秒05幀的透明度為0%。如下圖所示。

5、顯然可以看到第4步中我們復(fù)制的圖層做了縮放動畫后會超出環(huán)境“env”層的區(qū)域，那么為了將其限制在“env”的區(qū)域中，就需要將“env”層作為這個層的遮罩。但由于我們?nèi)匀恍枰?ldquo;env”顯示，所以將“env”復(fù)制一層置于照亮層的上方作為遮罩，如下圖所示。

6、由于燈點亮也會影響到頂部電線的亮度，所以將“line”層移到照亮層的下方。觀察下圖可以看到，電線“line”圖層同樣超出了“env”的范圍，所以我們同樣需要再次復(fù)制一個“env”層作為“line”層的遮罩，如下圖所示。

7、接下來先調(diào)整下環(huán)境層“env“和電線層“line”的顏色，分別是#111111和#666666。

8、接下來制作burst煙花效果。使用motion腳本為其添加burst效果，然后調(diào)整參數(shù)如下圖所示。 

9、然后為burst圖層的burst效果K幀，距離中心的距離第15幀為0，第26幀為190；高度第22幀為40，第15和26幀為0。然后將burst圖層移至“bulb”圖層上方，如下圖所示。

10、至此，大的動效都已經(jīng)完成，只剩下表情的變化。但由于現(xiàn)在這個顏色不太容易看出表情。那么我們就把添加調(diào)整圖層和模糊效果及遮罩的步驟提前做了吧，反正對于這個案例而言”燈罩“層沒有動畫效果。我們在燈罩層下方新建調(diào)整圖層，添加高斯模糊，調(diào)整到合適的數(shù)值；然后將“燈罩”層作為調(diào)整圖層的蒙版；然后我們又看不到“燈罩”了，那就需要將“燈罩”層復(fù)制一層，然后調(diào)整“燈罩”圖層的透明度。如下圖所示。

11、現(xiàn)在就可以做表情動畫了，先做嘴巴。將現(xiàn)在微笑的表情定格在第10幀和第1秒20幀之間，然后在第2秒處將嘴巴路徑中間的錨點向上移動并調(diào)整兩端錨點的貝塞爾手柄變?yōu)楸瘋麪睿俅蜬幀。

12、然后回到第0幀，將嘴巴的路徑變?yōu)橐粭l直線并縮短一點。然后將這個狀態(tài)K在第0和第2秒10幀處。如下圖所示。

13、嘴巴動畫完成就剩下眼睛了，同樣對路徑K幀，至于什么時候眨眼自己隨意吧，我是這么K的。首先在第10和第2秒處讓眼睛睜開，在第0和第2秒10幀處讓眼睛閉上。而在第10和第2秒之間時不時眨幾下就可以了。

14、最終效果如下圖所示。

然后我覺得顏色太亮了，就將復(fù)制的“bulb”層填充顏色改為了#555555。

——————— 案例3：下載(download) ——————

前言：關(guān)于這個圖標，我想再多說幾句，不然總有人問。這個圖標中的對號，%，以及數(shù)字我沒有在之前版本的Ai畫稿中體現(xiàn)，是直接在Ae中添加的。在這個教程中我會將這些元素加入到Ai畫稿中（大家可以下載）。此外由于之前的作品中這個圖標的動效存在一點瑕疵，我也會在這個教程中完善。

1、將Ai圖層轉(zhuǎn)換為形狀，并刪除原來Ai圖層，添加好文字圖層后如下圖所示。這里“%”圖層可以不用文字層代替保持原狀。

2、依然對動畫進行分析拆解：隨著箭頭一次次下落，云朵中的水位不斷上升，數(shù)字也在不斷遞增，直至100%時，對勾才會出現(xiàn)。

3、先做云朵中水波紋的動畫。選中圖層“water”，添加波形變形效果。調(diào)整到一個自己覺得合適的波高和波寬以及波速。

4、對“wave”圖層的位置屬性K幀，在第0幀把該圖層向下移，直到不被云朵層覆蓋；在第2秒處把該圖層向上移，直到正好可以填充滿整個云朵層。選中這兩個關(guān)鍵幀，按F9處理成緩入緩出效果。（你也可以制作兩層水波紋看上去效果會更好）

5、然后制作箭頭動畫，同樣對“arrow”圖層的位置屬性K幀，可以先將云層的不透明度改為50%，便于觀察箭頭位置， 第0幀箭頭在高處，第一秒時箭頭進入云層之中。為了使得箭頭可以一次次不斷落下來，我們使用loopOut()表達式來代替重復(fù)的K幀操作。如下圖所示。

6、我們先將水的顏色改為白色，透明度更改為50%。播放動畫時會發(fā)現(xiàn)當水灌滿云層時，箭頭本應(yīng)該立即停止運動并消失，但沒有，所以我們需要在第2秒處讓“arrow”圖層消失。

7、下面制作數(shù)字跳動的動畫，為“number”添加編號效果，使用這個效果會使得原來對文字設(shè)置的樣式都消失，所以在一開始我們沒必要糾結(jié)文字層的樣式，因為在這一步還是不可避免地要修改。然后為數(shù)值偏移K幀，在第0幀為0，第2秒處為100。同樣選中這兩幀添加緩動效果。如下圖所示。

8、接下來就是“√”的路徑修剪動畫了。首先“√”應(yīng)該從第2秒左右開始出現(xiàn)；然后為該圖層添加修剪路徑的效果，如下圖所示。

9、然后展開修剪路徑的選項，可以看到開始和結(jié)束，為這兩個屬性K幀。在第1秒28幀處開始結(jié)束都為0，在第2秒10幀處開始為15，結(jié)束為80。

10、之所以沒有讓修剪路徑從0走到100，是因為我故意將這段路徑畫長了一點，留下足夠的空間進行回彈。 這是為添加motion腳本的興奮效果留點余地。如下圖。

11、下面來解決一個問題，就是水波紋超出了云朵的覆蓋范圍，那么需要把“cloud”層復(fù)制一份作為“water”層的遮罩。

12、然后讓“number”和“%”圖層在第2秒結(jié)束后消失。如下圖所示。

13、然后就剩最后一步就是開篇提到的那個貫穿全篇教程的知識點了。在”cloud“層下方新建調(diào)整圖層，添加高斯模糊效果，調(diào)整到合適的數(shù)值；然后將”cloud“圖層透明度恢復(fù)為100%（之前為了便于看到下方箭頭將其透明度更改為了50%），然后作為調(diào)整圖層的遮罩；再復(fù)制一份“cloud”圖層并顯示然后調(diào)整透明度為50%。如下圖所示。

14、本案例最終效果如下圖所示。

篇幅太長，所以分成了（上）、（下）兩篇，每篇三個圖標。做教程太麻煩了，尤其是將步驟寫成文字，就會有很多需要注意的細節(jié)要用文字來描述，并輔以截圖進行標注，第一次發(fā)教程，雖然已經(jīng)檢查過，但是不知道會不會還有沒注意到的細節(jié)問題，也歡迎大家一起批評指正。

Powered by Froala Editor