我們在進行交互設計的時候，大部分時間是基于界面和功能邏輯的考慮，也適當的進行了交互效果的考慮，那么我們如何把交互的效果直觀的表現出來呢，除了用axure做出交互的動態效果，ps繪制GIF圖，代碼設計動效外，還可使用一個非常容易上手的工具，那就是Adobe 的AE，AE是一款強大的后期軟件，同時也可以用來制作不少直觀的動效預覽效果。

常見的動效有：縮放，漸變，透明度變化，旋轉，左右滑進，左右滑出，跳動，顏色變化等。

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

我們可以右鍵導入素材，或者在AE里面直接用上方的工具進行繪制來制作想要的效果。素材拖動到圖層去，上方的預覽區就可以看到我們放進去的素材了。

2.因為比較簡單的效果，這里我是直接在AE里面繪制一些簡單圖形，放到圖層窗口中，我們先做一個位移的效果，舉一反三很快就能上手了。點擊三角符號展開圖層的各種效果屬性，打開變換，右側調節時間，我們是從0s開始所以把指針拖到00s，點擊位置前面的類似鬧鐘的圖標，開始記錄關鍵的幀數。

然后拖動指針到01s再調節位置后面的坐標參數，我這里是做Y軸的變化，所以就只調節Y軸坐標的數值就可以。這樣從0到1s的位置動畫就做好了。非常簡單吧。除了位移外，縮放旋轉這些也是同樣的道理。

3.現在我們來試一下封面圖的制作，我們新建一個項目組，在素材區點擊右鍵新建合成，調節時長其他默認即可。

用上面的矩形畫兩個大小為560*210（寬高合適也行，不一定要這個）的矩形，填充一些不同的顏色，拖動到畫布外面對齊，利用位置關鍵幀來調節，沿著Y/X軸坐標參數，從畫布外向中間移動就可以了，具體的參數自己把握。

4.利用不同的變化效果去調節關鍵幀，就能做到縮放旋轉漸變等效果了。另外素材拖入圖層是默認占全部時長的可以通過時間軸拖動來調節素材長短來決定顯示的時間。點擊素材后鼠標放到左右會出現拖動的鼠標指針，這時就能拖動來調節了，在英文輸入狀態下，IO和[]可以快速對齊拖動的指針，銜接不同的素材。

5.效果做好后可以預覽一下，沒問題就可以合成了，合成快捷鍵OSX （shift+command+M),WIN(Ctrl+M）因為我們要導出GIF圖，所以就渲染為圖片的序列幀，然后倒入PS儲存為WEB格式就可以了。渲染的參數設置為JPEG序列或者png序列都可以，考慮到大小所以選擇JPEG格式。

6.確定后點擊渲染，渲染后的圖片用ps打開，勾選圖像序列，然后點文件-導出-存儲為WEB，格式選擇GIF再做其他一些參數調節，盡量控制圖像質量和文件大小的平衡，一個動態效果的預覽就做好了，基本上熟悉的話，很快就能搞定一些簡單或者中等難度的效果了。

7.因為動效涉及到物理學，所以我們可以觀察一些基本事物的運動特征，可以通過運動曲線來調節動效，才能在交互設計中起到一些錦上添花的效果，同時UI和交互或者產品不一定要非常專業的來制作動效，學習一些簡單的小技能，在工作起到一定的作用就算是可以了，畢竟還有專業的動效設計師在嘛。

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

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