提交需求
賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱?,我們?huì)在第一時(shí)間與您聯(lián)系!
哈嘍,各位UI中國(guó)的小伙伴,好久木有在這邊分享動(dòng)效相關(guān)的教程啦,上次發(fā)作品還是2018年,時(shí)隔多年終于想起了賬號(hào)跟密碼~~~
前言
今天墨染哥教你如何使用AE 5分鐘快速制作一個(gè)彈跳的加載小動(dòng)畫,如下圖所示,這個(gè)小動(dòng)畫要快速做出來,需要解決解決兩個(gè)技術(shù)難點(diǎn),第一個(gè)是食物圖標(biāo)的彈跳,第二個(gè)是文本的彈跳。
食物圖標(biāo)的彈跳
話不多說,先看看食物圖標(biāo)的彈跳怎么做,可以看到其實(shí)就是一個(gè)簡(jiǎn)單的位移動(dòng)畫,難的地方是節(jié)奏的調(diào)整。
詳細(xì)思路如下:
1、將食物圖標(biāo)做一個(gè)預(yù)合成,依次排列,一個(gè)圖標(biāo)只出現(xiàn)一秒鐘。(這樣做預(yù)合成的目的是減少K幀,等下我們可以給整個(gè)預(yù)合成做位移動(dòng)畫即可。)
2、現(xiàn)在給整個(gè)圖標(biāo)的預(yù)合成做上下運(yùn)動(dòng)的動(dòng)畫,直接K位置關(guān)鍵幀即可。
默認(rèn)效果是下圖這樣子的。
有木有覺得很僵硬?這是因?yàn)闆]有調(diào)節(jié)動(dòng)效節(jié)奏的問題,正常的彈跳應(yīng)該是落下的時(shí)候加速,彈起的時(shí)候減速。
3、此時(shí)我們要調(diào)節(jié)關(guān)鍵幀的節(jié)奏了,看好了,這里有個(gè)進(jìn)階小技巧。選中這些在頂點(diǎn)位置的關(guān)鍵幀,然后 Alt + 鼠標(biāo)左鍵雙擊關(guān)鍵幀,彈出關(guān)鍵幀速度調(diào)節(jié)窗口,將速度調(diào)為0,影響為80,即可快速做出彈跳動(dòng)畫。
調(diào)節(jié)完節(jié)奏之后,是不是看起來舒服多了?
4、給預(yù)合成加一個(gè)旋轉(zhuǎn)動(dòng)畫。
So,圖標(biāo)的彈跳動(dòng)畫就搞定了。
文本的彈跳
1、這里先敲上一段文本。然后開啟對(duì)稱網(wǎng)格、網(wǎng)格( 在AE內(nèi)繪制圖形時(shí),開啟這兩個(gè)選項(xiàng)繪制的圖形會(huì)更加精準(zhǔn),也更方便繪制哦 )。
2、選中文本圖層,用鋼筆工具繪制一條蒙版路徑,并使用鋼筆工具的的添加錨點(diǎn)工具,在蒙版路徑中間的位置上加多一個(gè)錨點(diǎn),并拉出控制手柄,方便等下調(diào)節(jié)路徑做動(dòng)畫。
3、展開文本屬性,在路徑選項(xiàng)里面,選擇剛剛繪制的蒙版路徑。
4、根據(jù)圖標(biāo)彈跳的節(jié)奏,給蒙版路徑K幀,調(diào)節(jié)向上向下彎曲,做成彈跳的文本。
做完一個(gè)彈跳之后,可以復(fù)制關(guān)鍵幀到下一個(gè)位置即可。
文本動(dòng)畫最終效果如下:
有木有很Q彈的感覺? 彈彈彈,彈走魚尾紋~
加上圖標(biāo)的彈跳動(dòng)畫,最終效果如下:
好了,最后,我們?cè)僬w包裝一下,一個(gè)簡(jiǎn)單的加載動(dòng)畫作品就誕生了~~
最后
好了,這個(gè)小教程到這里就結(jié)束啦,希望可以幫到你,喜歡的話,來個(gè)一鍵三連。歡迎大家做完練習(xí)私聊我,發(fā)我看看做的效果哦~~
最后,附上我的源文件一份,有需要的可以直接在UI中國(guó)這里下載哦~~
點(diǎn)贊破100,我們下一個(gè)教程見~~~
作者:墨染ART
本文由 @墨染ART 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。
原文:http://dwz.date/bquY
Powered by Froala Editor
密碼登錄
大牛,別默默的看了,快登錄幫我點(diǎn)評(píng)一下吧!:)
登錄 立即注冊(cè)