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

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

2、合成中創(chuàng)建轉(zhuǎn)場效果2.另外一個合成中創(chuàng)建展示效果3.導(dǎo)出Photoshop   4. 優(yōu)化GIF圖像素材倫敦背景圖一張手機(jī)透視效果模板一張一、基本構(gòu)建創(chuàng)建轉(zhuǎn)場效果合成 步驟1 打開AE，合成>新建合成(Cmd+N)，尺寸為640*1136，幀數(shù)29，持續(xù)6s步驟2. 導(dǎo)入倫敦背景圖像，將圖像丟入合成1，調(diào)整背景圖像尺寸，使其適合畫布步驟3創(chuàng)建3個藍(lán)色框（用形狀圖層），這些藍(lán)色框?qū)钠聊簧戏较侣涞狡聊坏撞?，寬?13、214、213px。三個方框上方的方框?qū)挾?40px,輸入相應(yīng)文本。步驟4用鋼筆勾勒出云朵和6片雪花空心圓（勾勒的略水，見諒

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

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

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

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