我們?cè)谶M(jìn)行交互設(shè)計(jì)的時(shí)候，大部分時(shí)間是基于界面和功能邏輯的考慮，也適當(dāng)?shù)倪M(jìn)行了交互效果的考慮，那么我們?nèi)绾伟呀换サ男Ч庇^的表現(xiàn)出來(lái)呢，除了用axure做出交互的動(dòng)態(tài)效果，ps繪制GIF圖，代碼設(shè)計(jì)動(dòng)效外，還可使用一個(gè)非常容易上手的工具，那就是Adobe 的AE，AE是一款強(qiáng)大的后期軟件，同時(shí)也可以用來(lái)制作不少直觀的動(dòng)效預(yù)覽效果。

常見的動(dòng)效有：縮放，漸變，透明度變化，旋轉(zhuǎn)，左右滑進(jìn)，左右滑出，跳動(dòng)，顏色變化等。

Adobe After Effects CS3 中文綠色免費(fèi)版

• 類型：媒體其它
• 大?。?/span>138MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2016-03-19

查看詳情

1.首先安裝完AE后打開，界面默認(rèn)居中是預(yù)覽，左邊是素材窗口，下方是時(shí)間軸和圖層。

我們可以右鍵導(dǎo)入素材，或者在AE里面直接用上方的工具進(jìn)行繪制來(lái)制作想要的效果。素材拖動(dòng)到圖層去，上方的預(yù)覽區(qū)就可以看到我們放進(jìn)去的素材了。

2.因?yàn)楸容^簡(jiǎn)單的效果，這里我是直接在AE里面繪制一些簡(jiǎn)單圖形，放到圖層窗口中，我們先做一個(gè)位移的效果，舉一反三很快就能上手了。點(diǎn)擊三角符號(hào)展開圖層的各種效果屬性，打開變換，右側(cè)調(diào)節(jié)時(shí)間，我們是從0s開始所以把指針拖到00s，點(diǎn)擊位置前面的類似鬧鐘的圖標(biāo)，開始記錄關(guān)鍵的幀數(shù)。

然后拖動(dòng)指針到01s再調(diào)節(jié)位置后面的坐標(biāo)參數(shù)，我這里是做Y軸的變化，所以就只調(diào)節(jié)Y軸坐標(biāo)的數(shù)值就可以。這樣從0到1s的位置動(dòng)畫就做好了。非常簡(jiǎn)單吧。除了位移外，縮放旋轉(zhuǎn)這些也是同樣的道理。

3.現(xiàn)在我們來(lái)試一下封面圖的制作，我們新建一個(gè)項(xiàng)目組，在素材區(qū)點(diǎn)擊右鍵新建合成，調(diào)節(jié)時(shí)長(zhǎng)其他默認(rèn)即可。

用上面的矩形畫兩個(gè)大小為560*210（寬高合適也行，不一定要這個(gè)）的矩形，填充一些不同的顏色，拖動(dòng)到畫布外面對(duì)齊，利用位置關(guān)鍵幀來(lái)調(diào)節(jié)，沿著Y/X軸坐標(biāo)參數(shù)，從畫布外向中間移動(dòng)就可以了，具體的參數(shù)自己把握。

4.利用不同的變化效果去調(diào)節(jié)關(guān)鍵幀，就能做到縮放旋轉(zhuǎn)漸變等效果了。另外素材拖入圖層是默認(rèn)占全部時(shí)長(zhǎng)的可以通過(guò)時(shí)間軸拖動(dòng)來(lái)調(diào)節(jié)素材長(zhǎng)短來(lái)決定顯示的時(shí)間。點(diǎn)擊素材后鼠標(biāo)放到左右會(huì)出現(xiàn)拖動(dòng)的鼠標(biāo)指針，這時(shí)就能拖動(dòng)來(lái)調(diào)節(jié)了，在英文輸入狀態(tài)下，IO和[]可以快速對(duì)齊拖動(dòng)的指針，銜接不同的素材。

5.效果做好后可以預(yù)覽一下，沒(méi)問(wèn)題就可以合成了，合成快捷鍵OSX （shift+command+M),WIN(Ctrl+M）因?yàn)槲覀円獙?dǎo)出GIF圖，所以就渲染為圖片的序列幀，然后倒入PS儲(chǔ)存為WEB格式就可以了。渲染的參數(shù)設(shè)置為JPEG序列或者png序列都可以，考慮到大小所以選擇JPEG格式。

6.確定后點(diǎn)擊渲染，渲染后的圖片用ps打開，勾選圖像序列，然后點(diǎn)文件-導(dǎo)出-存儲(chǔ)為WEB，格式選擇GIF再做其他一些參數(shù)調(diào)節(jié)，盡量控制圖像質(zhì)量和文件大小的平衡，一個(gè)動(dòng)態(tài)效果的預(yù)覽就做好了，基本上熟悉的話，很快就能搞定一些簡(jiǎn)單或者中等難度的效果了。

7.因?yàn)閯?dòng)效涉及到物理學(xué)，所以我們可以觀察一些基本事物的運(yùn)動(dòng)特征，可以通過(guò)運(yùn)動(dòng)曲線來(lái)調(diào)節(jié)動(dòng)效，才能在交互設(shè)計(jì)中起到一些錦上添花的效果，同時(shí)UI和交互或者產(chǎn)品不一定要非常專業(yè)的來(lái)制作動(dòng)效，學(xué)習(xí)一些簡(jiǎn)單的小技能，在工作起到一定的作用就算是可以了，畢竟還有專業(yè)的動(dòng)效設(shè)計(jì)師在嘛。

8.最后放張做了2個(gè)小時(shí)的效果圖，拙劣之處還望大神們不吝賜教。

以上就是AE制作APP界面gif動(dòng)畫效果方法介紹，操作很簡(jiǎn)單的，喜歡的朋友可以參考本文，希望能對(duì)大家有所幫助！

相關(guān)閱讀：ae怎么制作文字隨著煙霧消散效果? Particular的使用方法

最新評(píng)論