如何用AE创建简单的UI动效
在Dribbble和Behance上，你们可能见过很多用Gif来表达设计理念的UI作品。很多人都想知道怎么来制作，怎样更好、更高效的表达自己的理念。很明显，动态的展现比静态的更形象，在这片文章中，我将教大家如何“动态化”自己的设计作品。
动态GIF展现UI作品，优点在于：
1.展示实际工作流程
2.利用转场，来展示应用不同状态时的效果
3.便于网络分享。
工具
After Effects CS6 or CC
Photoshop CS6 or CC
设计流程
After Effects
1.在一个合成中创建转场效果
2.另外一个合成中创建展示效果
3.导出
Photoshop
4. 优化GIF图像
素材
伦敦背景图一张
手机透视效果模板一张
一、基本构建
创建转场效果合成
步骤1
打开AE，合成>新建合成(CmdN)，尺寸为640*1136，帧数29，持续6s
步骤2.
导入伦敦背景图像，将图像丢入合成1，调整背景图像尺寸，使其适合画布
步骤3
创建3个蓝色框（用形状图层），这些蓝色框将从屏幕上方下落到屏幕底部，宽度213、214、213px。三个方框上方的方框宽度640px,输入相应文本。
步骤4
用钢笔勾勒出云朵和6片雪花空心圆（勾勒的略水，见谅）
步骤5
保存一下
展示合成
步骤1
创建合成2
尺寸1280 x 720帧数29，时间6s
步骤 2. 导入iPhone背景,调整尺寸。
步骤3
把合成1拖到合成2里面，那么合成2里面应该是这样：（p.s，我加了一层背景层）
步骤4.
选中合成1，效果>扭曲>边角定位，让合成1的4个角对上模板中屏幕的4个角。
-----------------------------------------------以上为基本构建部分-------------------------------------------------------------------
二、动效制作
下面，我们来分解一下动画：
1. 3个蓝色方框变长，不同时的落下
2. 透明框从底部往上移动，自始至终宽度不变。
3. 4个框抵达目的地后，文字开始出现，蓝色框文字是比例扩大从不透明变透明，透明框中得文字是从不透明变透明。
4. 云朵图标，同时伴随雪花。
5. Snowy文字出现。
形状图层中，可以控制的属性有比例、位置、不透明度、描边等等，本文的动效中，就充分利用了这些属性随时间的变化，打造出动画效果。
处理过程
首先推荐2个脚本插件Ease and wizz和Repostion Anchor Point
一个方便做运动曲线，一个方便设置锚点位置。
三个蓝色框
打开合成1，选中三个蓝色框，设置如下
备注：
1.最左面和最右面的蓝色框锚点在上方（利用Anchor Point插件设置）
2.比例从0-100%
3.利用Ease and wizz选中关键帧，可以很方便的调节运动曲线。
透明框
透明框的运动，开始以很快的速度移动了大部分位移，后来速度减慢，缓缓移动到原位，设置如下
备注：Ease and Wizz中设置Quadout 运动效果比较平滑。
底部文字
备注：
1.三个蓝色框，当蓝色框触及到底部时，文字快速弹出，不透明度从0->100%,比例从0->100%
2.透明框中的文字随透明框一起运动（位置设置可以参考透明框），但是，左侧的文字先到，右侧的-4度后到，注意时间轴中得设置。
云朵
当透明框的文本开始出现时，云朵出现，先是透明度从0-100%。
而比例开始时是60%，当透明度到了100%时，从60%->100%
雪花小圆点
当云朵动效完成后，雪花小圆点开始逐个出现。
备注：
1.注意小圆点会错落的向右移动，然后弹回，注意运动顺序的调节
2.此次也建议用QuadOut
3.注意小圆点逐个出现，因此透明度的变化要在时间轴上依次设置。
Snowy文字效果
这里运用了蒙版运动，来打造Snowy文本逐渐出现的效果，注意Snowy不透明度也要变化（蒙版的不透明度变化是多余，请勿模仿）
效果：
原作者的做法：
效果：
结果：
----------------------------------------------------以上为动画制作部分--------------------------------------------------------------
三、导出
方法1：AEPS
1.保存后，AE中合成>添加到渲染队列
完成设置后，点渲染
2.用PS打开渲染出来的.mov(文件>导入>视频帧到图层）
3.CmdShiftS 或者 文件>储存为Web可用格式
备注：
1.循环选项选择永远
2.图像大小可以设置
3.注意选择Gif格式
方法2：LiceCap
如果你不想用PS的话，可以先调节AE中画布大小，再使用LiceCap这款录屏为Gif的小软件录制，很方便，堪称最好用的GIF录制软件。（有多平台版本）
绛旓細銆岀浉铻嶃嶆槸鎴戞帴瑙G涔嬪悗涓鐩村緢鍠滄鐨勪竴涓晥鏋滐紝鑷繁涔熷皾璇曞鎵句笉鍚岀殑鍔炴硶鏉ュ疄鐜扮浉铻嶇殑鍔ㄦ晥锛屼笅闈㈡槸鎴戞敹闆嗙殑3绉嶅父鐢ㄧ殑鍒朵綔鏂规硶锛屽悇鏈夊崈绉嬶紝姣忕鏂规硶閮戒粎鏈変袱涓変釜姝ラ锛屽彲浠ュ府浣犺交鏉惧疄鐜扮浉铻嶆晥鏋溿備竴銆佸揩閫熸ā绯+Choke 姝ラ1锛氬仛鍑哄熀鏈殑杩愬姩锛岃繖閲屽仛鐨勬槸涓涓粍鑹插皬鐞冨湪鐧借壊鍦嗙煩涓婃柟绉诲姩銆傛楠2锛氱粰鍚堟垚...
绛旓細濡備綍浣跨敤AE鍒朵綔鑺辩摚椋樿惤鐨勫姩鏁锛熶互涓嬫槸AE鍒朵綔鑺辩摚椋樿惤鍔ㄦ晥鐨勬楠わ細1. 鎵撳紑AE杞欢锛鍒涘缓涓涓柊鐨勫悎鎴愩備娇鐢ㄣ愰挗绗斿伐鍏枫戠粯鍒朵竴涓姳鐡ｇ殑褰㈢姸銆2. 閫氳繃銆怌trl+Shift+C銆戝垱寤轰竴涓鍚堟垚锛屽懡鍚嶄负鈥滆姳鐡ｂ濄傜劧鍚庯紝鏂板缓涓涓函鑹插浘灞傚苟娣诲姞銆怭articular銆戞晥鏋溿傚皢銆怑mitter Type銆戣缃负銆怋ox銆戯紝骞跺銆怭article...
绛旓細鐪肩潧閮ㄥ垎锛氬疄鐜颁竴涓綋娴疯睔閮ㄥ垎鐢诲畬涔嬪悗锛屾樉绀虹溂鐫涳紝缁欏畠缂╂斁K鍏抽敭锛屽紑濮嬩笉鏄剧ず锛岀劧鍚庡啀100%鏄剧ず锛涙渶鍚庡叏閫夋墍鏈夊叧閿抚锛屾寜涓婩9鏉ヤ竴涓紦鍔紱浠ヤ笂灏辨槸鈥AE鍒朵綔涓绗旀垚鐢诲皬鍔ㄦ晥鐨勬搷浣滄暀绋嬧濅簡锛岀湅瀹岃繖涓暀绋嬩綘鐭ラ亾鎬庝箞鎿嶄綔浜嗗惂锛屾洿澶欰E鍥炬枃鏁欑▼灏藉湪鈥滄枃绔犫濓紝鐐瑰嚮浜嗚В鏇村鍝︺備互涓婂氨鏄湰鏂囩殑鍏ㄩ儴鍐呭锛屽笇鏈涘...
绛旓細AE鍋氬瀮鍦炬《纾ㄧ爞鐜荤拑icon鍔ㄦ晥鏁欑▼锛1銆佸皢Ai鏂囦欢瀵煎叆Ae鍚庝粠鐭㈤噺鍥惧眰鍒涘缓褰㈢姸锛岀劧鍚庡垹闄i鍥惧眰锛岀粨鏋滃涓嬪浘鎵绀恒2銆佸垎鏋愬姩鐢伙細妗剁洊浠ュ彸杈规敮鐐逛负涓績鏃嬭浆寮忔墦寮锛涚揣鎺ョ潃鍨冨溇浠ユ姏鐗╃嚎涓鸿矾寰勪粠鐢婚潰澶栭鍏ュ瀮鍦炬《锛涙《鐩栧悎涓婏紱鍨冨溇妗跺彂鐢熷舰鍙橈紝鍦ㄦ仮澶嶅彉褰㈢殑鐬棿鍨冨溇琚矇纰庛3銆佸厛瀵瑰浘灞傜殑鐖跺瓙绾у叧绯昏繘琛岀粦瀹氾紝鈥滀笁...
绛旓細杞欢閲囩敤鏈鍏堣繘鐨勬覆鏌撴妧鏈繘琛3D娣卞害鏁堟灉澶勭悊銆佹樉绀鸿壊褰╃鐞嗐乂R鏁堟灉娣诲姞銆佸姩鎬佸浘褰㈠鐞嗭紝鏇寸揣瀵嗗湴缁撳悎Animate鍜孹D杩涜楂樼瑙嗛鏁堟灉澶勭悊銆傝繖鍙互甯姪鐢ㄦ埛鏈夋晥鍜岀簿纭湴鍒涘缓鏃犳暟寮曚汉娉ㄧ洰鐨勫姩鎬佸浘褰㈠拰浠や汉鎯婂徆鐨勮瑙夋晥鏋溿傛帴涓嬫潵鎴戜滑灏卞皢鍒╃敤AE鏉ユ暀澶у鎬庝箞鍒朵綔寮鐏鍔ㄦ晥鏁堟灉锛屾劅鍏磋叮鐨勫氨涓嶈璧板紑浜嗭紒AE鍒朵綔寮鐏姩鏁...
绛旓細1銆佸皢Ai鏂囦欢瀵煎叆Ae鍚庝粠鐭㈤噺鍥惧眰鍒涘缓褰㈢姸锛岀劧鍚庡垹闄i鍥惧眰锛岀粨鏋滃涓嬪浘鎵绀恒2銆佽瀵熷垎鏋愬姩鐢伙細鎷夎姳鍏堟墦寮锛岀劧鍚庢槸绯诲甫鎵撳紑锛岀揣鎺ョ潃绀肩洅鐩栨墦寮锛岀劧鍚庤功鍑烘潵寰堝灏忕帺鎰忓効锛堟湁鐨勯鍑烘潵涔嬪悗娑堝け浜嗭紝鏈夌殑鍙堣惤鍥炰簡绀肩洅涓3銆佹垜浠厛鏉ュ仛鎷夎姳鎵撳紑鐨勫姩鏁锛屼娇鐢ㄤ慨鍓矾寰勶紝绗10甯у紑濮嬩负0锛岀25甯у紑濮嬩负100%锛屽苟...
绛旓細鍦ㄦā鎷熸爮閫夋嫨AE鑷甫鐨勯洦婊存晥鏋滐紝璋冩暣鍚勯」鍙傛暟锛屾帶鍒堕洦婊寸殑鏁伴噺銆佽寖鍥寸瓑銆傛渶缁堟晥鏋滃浘 鍏充簬鈥淎E鍒朵綔鐐叿Loading鍔ㄦ晥鎬庝箞鍋氾紵AE鐐叿Loading鍔ㄦ晥鍒朵綔鏁欑▼鈥濈殑鍐呭鏈湡灏绠鍗鍒嗕韩杩欎箞澶氾紝姝ラ閮借鐨勫緢娓呮櫚锛屽笇鏈涗綘鑳藉浼氾紒AE瑙嗛鍚庢湡鍒朵綔澶勭悊濡傛灉鑳藉鎺屾彙鐨勫ソ锛岀壒鏁堝惛鐫涚殑瑙嗛蹇熷埗浣滆繕涓嶆槸淇℃墜鎷堟潵锛熸兂瀛E锛屾兂...
绛旓細ui璁捐涓竴鏍圭嚎,涓鍍忕礌,鑹插僵楗卞拰搴︾殑缁嗗井宸埆,涓涓皬娓愬彉,涓涓瓧浣撶殑閫夋嫨,鐢诲竷鐨勫ぇ灏,鐢ㄧ瑪鐨勭矖缁,杩欎簺灏忕粏鑺,铏界劧涓嶆槸浜轰汉閮借兘璇村緱鍑,浣嗘槸鑳界涓鐪尖滅湅鍦ㄥ績閲,鎰熻鍒伴瀛愰噷鈥,鎵浠ュ氨绠椾笉璇,缁嗚妭涔熸槸鑳借浠讳綍浜虹涓鏃堕棿鎰熻鍒扮殑,鍒拷瑙嗘瘡涓涓皬缁嗚妭,瀹冭涓嶅畾灏辨槸浣犳垚鍔熺殑鍫″瀿,涔熸槸涓鏈夋満浼氬氨璁╀綘澶辫触鐨...
绛旓細AE鍒朵綔鑺辩摚椋樿惤鍔ㄦ晥鐨勬柟娉曪細1.鎵撳紑杞欢AE锛鏂板缓涓涓悎鎴愶紝浣跨敤銆愰挗绗斿伐鍏枫戠粯鍒朵竴涓姳鐡ｇ殑褰㈢姸銆2.銆怌trl+Shift+C銆鍒涘缓棰勫悎鎴愬懡鍚嶄负鑺辩摚銆傛柊寤轰竴涓函鑹插眰娣诲姞銆怭articular銆戞晥鏋滐紝灏嗐怑mitterType銆戣涓恒怋ox銆,鍐嶅銆怭article銆戣繘琛岃缃3.鍐嶇粰銆怭article銆-銆怰otation銆戦噷闈㈡棆杞繘琛岃缃4.鍦ㄥ銆...
绛旓細閫氳繃鎺у埗鍏冪礌鐨勫熀鏈睘鎬ф潵瀹炵幇鍔ㄦ晥锛屼綅缃紙P锛夈佺缉鏀撅紙S锛夈佹棆杞紙R锛夈侀忔槑搴︼紙T锛変緥锛氬垪琛ㄥ厓绱犵敱宸﹀悜鍙虫粦鍔ㄥ嚭鐜鐨勫姩鏁 2銆佽矾寰勫姩鐢 璺緞鍔ㄧ敾灏辨槸鐗╀綋鎴栬呮煇涓厓绱犳寜鐓ц瀹氬ソ鐨勮矾寰勮繘琛岃繍鍔 渚1: 绾搁鏈虹殑杩愬姩 渚2: 閽堝拰绾跨殑杩愬姩 渚3: 姘存场娉＄殑杩愬姩 渚4: 鍗＄墖鐨勬粦鍔 3銆佷慨鍓矾寰勫姩鐢 閫氳繃鍦...
