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

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

2、opCS6orCC、 I I設(shè)計(jì)流程AfterEffects1. 在一個(gè)合成中創(chuàng)建轉(zhuǎn)場效果2. 另外一個(gè)合成中創(chuàng)建展示效果精心整理3.導(dǎo)出Photoshop?4.優(yōu)化GIF圖像、基本構(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個(gè)藍(lán)色框（用形狀圖層），這些藍(lán)色框?qū)钠聊簧戏较侣涞狡聊坏撞?，寬?13、214、213px 三個(gè)方框上方的方框?qū)挾?40px,輸入相應(yīng)文本。步驟4用鋼筆勾勒出云朵和6片雪花空心圓（勾勒的略水，見諒）I L-1

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

4、+從不透明變透明，透明框中得文字是從不透明變透明。4. 云朵圖標(biāo)，同時(shí)伴隨雪花。5.Snowy文字出現(xiàn)。形狀圖層中，可以控制的屬性有比例、位置、不透明度、描邊等等，本文的動效中，就充分利用了 這些屬性隨時(shí)間的變化，打造出動畫效果。處理過程-來源網(wǎng)絡(luò)精心整理首先推薦 2 個(gè)腳本插件 Easeandwizz 和 RepostionAnchorPoint一個(gè)方便做運(yùn)動曲線，一個(gè)方便設(shè)置錨點(diǎn)位置。三個(gè)藍(lán)色框打開合成1,選中三個(gè)藍(lán)色框，設(shè)置如下備注1. 最左面和最右面的藍(lán)色框錨點(diǎn)在上方（利用An chorPoi nt插件設(shè)置）2. 比例從0-100%3. 利用Easeandwizz選中關(guān)鍵幀，可以很方便

5、的調(diào)節(jié)運(yùn)動曲線。X M I : /I , X 透明框透明框的運(yùn)動，開始以很快的速度移動了大部分位移，后來速度減慢，緩緩移動到原位，設(shè)置如下備注：EaseandWizz中設(shè)置Quad+out 運(yùn)動效果比較平滑。、 % X I 1底部文字備注：1. 三個(gè)藍(lán)色框，當(dāng)藍(lán)色框觸及到底部時(shí)，文字快速彈出，不透明度從0-100%,比例從0-100%2. 透明框中的文字隨透明框一起運(yùn)動（位置設(shè)置可以參考透明框），但是，左側(cè)的文字先到，右側(cè)的-4度后到，注意時(shí)間軸中得設(shè)置。-來源網(wǎng)絡(luò)精心整理云朵當(dāng)透明框的文本開始出現(xiàn)時(shí)，云朵出現(xiàn)，先是透明度從0-100%而比例開始時(shí)是60%，當(dāng)透明度到了 100%時(shí)，從60%-

6、100%雪花小圓點(diǎn)當(dāng)云朵動效完成后，雪花小圓點(diǎn)開始逐個(gè)出現(xiàn)。.I I .-.II I1 7史|#. L _ _*亠 J1-J| 7-! J 備注：1 ,禮.f J J / I I I /_ rL 左 F、丄/ / / ,1. 注意小圓點(diǎn)會錯落的向右移動，然后彈回，注意運(yùn)動順序的調(diào)節(jié)I.尸才Qp7 jIr /2. 此次也建議用Quad+Out3. 注意小圓點(diǎn)逐個(gè)出現(xiàn)，因此透明度的變化要在時(shí)間軸上依次設(shè)置。| | 廣、.| i八L.ISnowy文字效果L 、X 弋丄/|（ . * j % I”這里運(yùn)用了蒙版運(yùn)動，來打造 Snowy文本逐漸出現(xiàn)的效果，注意 Snowy不透明度也要變化（蒙版的不透明度變化是多余，請勿模仿）效果：原作者的做法：效果：結(jié)果：-來源網(wǎng)絡(luò)精心整理 以上為動畫制作部分三、導(dǎo)出方法 1: AE+PS:| I.-1保存后，AE中合成 添加到渲染隊(duì)列）j完成設(shè)置后，點(diǎn)渲染2. 用PS打開渲染出來的.mov（文件 導(dǎo)入 視頻幀到圖層）x 尹“ I x X、:3. Cmd+Shift+S 或者文件 儲存為 Web可用格式備注：1 |1. 循環(huán)選項(xiàng)選擇永遠(yuǎn)2. 圖像大小可以設(shè)置I, r,I X I3. 注意選擇Gif格式、 I I方法 2: LiceCap如果你不想用PS的話，可以先調(diào)節(jié)AE中畫布大小，再使用LiceCap這款錄屏為Gif的小軟件錄制，