如何用AE制作簡單的UI動效教程

1、如何用AE創(chuàng)建簡單的UI動效天氣應用gif（據(jù)觀測，小圓點彈的過了，各位制作的時候修改一下吧）文末提供源文件下載在Dribbble和Behance上，你們可能見過很多用Gif來表達設計理念的UI作品。很多人都想知道怎么來制作，怎樣更好、更高效的表達自己的理念。很明顯，動態(tài)的展現(xiàn)比靜態(tài)的更形象，在這片文章中，我將教大家如何“動態(tài)化”自己的設計作品。動態(tài)GIF展現(xiàn)UI作品，優(yōu)點在于：1.展示實際工作流程2.利用轉場，來展示應用不同狀態(tài)時的效果3.便于網(wǎng)絡分享。工具1.After Effects CS6 or CC2.Photoshop CS6 or CC設計流程After Effects1.在一個

2、合成中創(chuàng)建轉場效果2.另外一個合成中創(chuàng)建展示效果3.導出Photoshop   4. 優(yōu)化GIF圖像素材倫敦背景圖一張手機透視效果模板一張一、基本構建創(chuàng)建轉場效果合成 步驟1 打開AE，合成>新建合成(Cmd+N)，尺寸為640*1136，幀數(shù)29，持續(xù)6s步驟2. 導入倫敦背景圖像，將圖像丟入合成1，調整背景圖像尺寸，使其適合畫布步驟3創(chuàng)建3個藍色框（用形狀圖層），這些藍色框將從屏幕上方下落到屏幕底部，寬度213、214、213px。三個方框上方的方框寬度640px,輸入相應文本。步驟4用鋼筆勾勒出云朵和6片雪花空心圓（勾勒的略水，見諒

3、）步驟5 保存一下 展示合成步驟1 創(chuàng)建合成2尺寸1280 x 720幀數(shù)29，時間6s步驟 2. 導入iPhone背景,調整尺寸。步驟3把合成1拖到合成2里面，那么合成2里面應該是這樣：（p.s，我加了一層背景層）步驟4.選中合成1，效果>扭曲>邊角定位，讓合成1的4個角對上模板中屏幕的4個角。-以上為基本構建部分-二、動效制作下面，我們來分解一下動畫1.3個藍色方框變長，不同時的落下2.透明框從底部往上移動，自始至終寬度不變。3.4個框抵達目的地后，文字開始出現(xiàn)，藍色框文字是比例擴大+從不透明變透明，透明框中得文字是從不透明變透明。4.

4、云朵圖標，同時伴隨雪花。5. Snowy文字出現(xiàn)。形狀圖層中，可以控制的屬性有比例、位置、不透明度、描邊等等，本文的動效中，就充分利用了這些屬性隨時間的變化，打造出動畫效果。處理過程首先推薦2個腳本插件Ease and wizz和Repostion Anchor Point一個方便做運動曲線，一個方便設置錨點位置。三個藍色框打開合成1，選中三個藍色框，設置如下備注1.最左面和最右面的藍色框錨點在上方（利用Anchor Point插件設置）2.比例從0-100%3.利用Ease and wizz選中關鍵幀，可以很方便的調節(jié)運動曲線。透明框透明框的運動，開始以很快的速度移動了大部分位移，后來速度減

5、慢，緩緩移動到原位，設置如下備注：Ease and Wizz中設置Quad+out 運動效果比較平滑。底部文字備注：1.三個藍色框，當藍色框觸及到底部時，文字快速彈出，不透明度從0->100%,比例從0->100%2.透明框中的文字隨透明框一起運動（位置設置可以參考透明框），但是，左側的文字先到，右側的-4度后到，注意時間軸中得設置。云朵當透明框的文本開始出現(xiàn)時，云朵出現(xiàn)，先是透明度從0-100%。而比例開始時是60%，當透明度到了100%時，從60%->100%雪花小圓點當云朵動效完成后，雪花小圓點開始逐個出現(xiàn)。備注：1.注意小圓點會錯落的向右移動，然后彈回，注意運動順序的

6、調節(jié)2.此次也建議用Quad+Out3.注意小圓點逐個出現(xiàn)，因此透明度的變化要在時間軸上依次設置。Snowy文字效果這里運用了蒙版運動，來打造Snowy文本逐漸出現(xiàn)的效果，注意Snowy不透明度也要變化（蒙版的不透明度變化是多余，請勿模仿）效果：原作者的做法：效果：結果：-以上為動畫制作部分-三、導出方法1：AE+PS1.保存后，AE中合成>添加到渲染隊列完成設置后，點渲染2.用PS打開渲染出來的.mov(文件>導入>視頻幀到圖層）3.Cmd+Shift+S 或者 文件>儲存為Web可用格式備注：1.循環(huán)選項選擇永遠2.圖像大小可以設置3.注意選擇Gif格式方法2：LiceCap如果你不想用PS的話，可以先調節(jié)AE中畫布大小，再使用LiceCap這款錄屏為Gif的小軟件錄制，很方便，堪稱最好