提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時間與您聯(lián)系!
水波紋加載動效,重點是水波動效和數(shù)字動效。
大家好!
最近在學(xué)習(xí)AE動效設(shè)計,感謝UI中國的小伙伴無私的分享。我也來分享一下水波動效的加載動效的制作過程。
添加的源文件,需要的小伙伴可以下載看一下。
1.首先分解一下動效的組成,主要有水波上漲和波動的效果、數(shù)字增加效果及氣泡效果。
2.分解好過程之后下手是不是就容易多了呢,接下來我們開始著手制作吧。
這里我沒有用AI去畫圖形,主要是因為水波形狀是有顏色漸變的效果,如果用AI畫了之后在AE里打開會失去顏色,變成灰度圖形,所以就直接在AE里面畫了,小伙伴如果畫單色圖形建議在AI里面畫好。
3.啰嗦這么多終于要開始了呢。首先打開AE(這不是廢話么),新建一個合成如下:
寬800px 、高600px,選擇方形像素,幀速率30,持續(xù)時間5秒鐘,這個建成后后面感覺時間什么的不夠不滿意都可以再修改的。
4.根據(jù)前面的分析,我們先畫水波。新建一個形狀圖層:從工具欄選擇矩形工具雙擊新建一個矩形。窗口會出現(xiàn)一個和合成一樣大小的矩形。
調(diào)整一下大小、顏色,自己看著調(diào)就行。
5.接下來把矩形邊調(diào)整為波浪形狀。這和我們平時用的PS、AI有點區(qū)別,首先要把矩形轉(zhuǎn)換成可編輯的對象才可以編輯。這里初學(xué)者可能會遇到問題。展開形狀圖形,選中矩形路徑 — 右鍵:轉(zhuǎn)換為貝塞爾曲線路徑。OK啦,接下來就像用ps一樣啦,調(diào)整你想要的波浪形狀。
6.調(diào)整好之后波浪后,調(diào)整一下透明度,然后Ctrl+D復(fù)制一層,左右移動下位置,把波浪錯開。
7.動畫時間到了。
把時間軸移動到第一幀的位置,選中兩個形狀圖層按快捷鍵P,然后點位置前面的秒表圖標(biāo),時間軸第0幀的位置就會出現(xiàn)一個關(guān)鍵幀。
8.位移
把時間軸移動到1秒15幀的位置,然后向左移動圖形位置,或者直接修改數(shù)值,修改數(shù)值或者移動圖形之后時間軸上會自動標(biāo)記關(guān)鍵幀。
9.位移
把時間軸移動到3秒的位置,分別復(fù)制每個圖層的第一幀Ctrl+C然后Ctrl+V粘貼。圖形移動到最初的位置,這個時候按空格鍵播放,已經(jīng)可以看到一個水波移動的動畫了。然后選中所有關(guān)鍵幀(圖1),按F9添加緩動效果(圖2),最后全選圖層右鍵 — 預(yù)合成。水波效果就完成啦,是不是很簡單呢?
10.接下來畫外面的幾個圓圈了。
和畫矩形一樣,這里就不貼圖了,修改下為300x300大小的正圓,然后Ctrl+D復(fù)制兩個正圓。分別修改復(fù)制出來的正圓大小為:340x340、400x400。
然后把外層的兩個圓的填充設(shè)成無(如下圖),同理點導(dǎo)航上的描邊,給圓添加添加描邊。
11.修改最里面的圓的填充色為漸變色。調(diào)整漸變填充里面的起始點和結(jié)束點,把漸變色調(diào)成想要樣紙。如下圖:
12.圖形畫好,開始動畫啦。鏘鏘鏘~~~
把剛才的預(yù)合成拖入到圖層里放在有填充色的上一次,在填充層上選擇軌道遮罩 —Alpha遮罩“水波”層,也就是剛剛拖進(jìn)去的圖層。
然后神奇的事情就會發(fā)生啦
13.開始設(shè)置關(guān)鍵幀做動畫了,還是要把時間軸移動到1秒的位置。選擇水波層,按快捷鍵P,點擊秒表圖標(biāo)建立關(guān)鍵幀,把水波向上移動到想要的高度,然后把時間軸移動0幀的位置,把水波向下移動到不見。按空格鍵就可以預(yù)覽水波上來的效果啦。
14.為了讓水波上去之后停留一段時間,這里我們把后面一幀復(fù)制,把時間軸移動到3秒的位置,粘貼關(guān)鍵幀。水波下去的效果就是把第1幀復(fù)制,時間軸再向后移動到4秒的位置粘貼。全選一下關(guān)鍵幀,添加緩動。水波加載這里就完成啦。
內(nèi)容有點多呀,數(shù)字增加效果和氣泡效果見下篇~
大牛,別默默的看了,快登錄幫我點評一下吧!:)
登錄 立即注冊