AE基础动效快速入门秘籍
一个合格的UI设计师，动效必须会做。动效有啥用?让你的老板，团队，甚至客户，在产品未上线前知道它是怎么玩的，促进感情，友好沟通必备神技能。当然，用来装装B也很好。。AE做动效，说实话 很方便，其实也对AE是大才小用了。
UI动效总结起来无非4种常态：位移、擦除、旋转、缩放
万法不离其宗，掌握了上面4种基础常态，做出其他吊炸天的效果只是知识补充和时间的问题了。
言归正传：
还没有用过AE的同学，它打开以后是下面这个样子的(方便大家阅读，我把窗口缩小了，重要窗口，已经标出)：
我们用AE做UI动效前，需要在PS里面做好图形，这章主要介绍的是基础动效，所以我只画了简单的图形用来展示效果，看下面：
切记，需要做动效的图层一定要单独画，不能合并。还有最好把需要做动效的图层转换为“智能对象”或者保持形状图层，并且根据动效类型做好命名：
那么，如何把PSD导入到AE呢?看图吧：
选择导入后，会弹出一个窗口：
具体详细的介绍，可以看我之前录制的AE基础视频，里面有很详细的介绍和选择的注意事项，我就不罗嗦了，获取方式在文章末尾。
在这里，我们选择 合成 - 可编辑的图层样式 - 确定
导入后，我们在“项目”窗口下方会看到我们导入的资源，双击类型为“合成”的文件，打开时间轴，这样我们就可以开始做动效啦，duang~
时间轴展开是这个样子滴：
我们开始让它动起来吧!
在AE里面基础的动效 都是通过时间轴上面的关键帧来完成的，SO EASY!
AE“菜单”栏下方是一些常用的工具，
我们选择形状的实话 会出现“中心点” (这个很重要，所有动效都需要根据这个中心点来运动)，但是默认情况下，中心点并不在形状的中心，咋整?看图：
所有图层 都按照此方法移动锚点，方便接下来的操作。
我们选择“旋转”图层，来做旋转动效
点开 “图层名称”左侧的小三角，选择“变换”，会看到第四个选择就是“旋转”
左侧的小时钟，就是用来添加 关键帧的点击，会出现第一个 关键帧，我们拖动时间轴到20S的位置，然后点击最左侧的菱形，添加第二个关键帧
在第二个关键帧出，我们设置旋转的角度，我先让他360°旋转 ，所以这里我设置数值为360，也就是旋转一周
效果如下：
其他类型的动效大同小异，方法是死的，灵活运用可以做出不同的效果组合
绛旓細 鍒囪锛闇瑕佸仛鍔ㄦ晥鐨勫浘灞備竴瀹氳鍗曠嫭鐢伙紝涓嶈兘鍚堝苟銆傝繕鏈夋渶濂芥妸闇瑕佸仛鍔ㄦ晥鐨勫浘灞傝浆鎹负鈥滄櫤鑳藉璞♀濇垨鑰呬繚鎸佸舰鐘跺浘灞锛屽苟涓旀牴鎹姩鏁堢被鍨嬪仛濂藉懡鍚嶏細 閭ｄ箞锛屽浣曟妸PSD瀵煎叆鍒癆E鍛?鐪嬪浘鍚э細 閫夋嫨瀵煎叆鍚庯紝浼氬脊鍑轰竴涓獥鍙ｏ細 ...
绛旓細瑕佸埗浣滈『搴忓姩鐢伙紝鍙互浣跨敤搴忓垪鍥惧眰鍔熻兘锛屽彲浠ュ揩閫熷缓绔嬮『搴忓姩鐢銆傚叧閿抚浣嶇疆闇瑕佷慨鏀癸紝鍙堜笉鑳界牬鍧忓叧閿抚涔嬮棿鐨勮窛绂绘瘮渚嬪叧绯伙紝鍙互閫変腑鎵鏈夊叧閿锛屾寜浣廇LT/Opt閿紝鍐嶆嫋鍔ㄦ渶鍚庝竴涓叧閿抚銆傛寜涓嬧淎LT/Opt+r鈥濆彲浠ュ皢鈥滃綋鍓嶆椂闂存寚绀哄櫒鈥濈殑鍓嶉儴鍥惧眰鏂紑锛屾寜涓嬧淎LT/Opt+]鈥濆彲浠ュ皢鈥滃綋鍓嶆椂闂存寚绀哄櫒鈥濈殑鍚庨儴鍥惧眰...
绛旓細1.鎵撳紑AE杞欢锛屻愭柊寤哄悎鎴愩戯紝浣跨敤銆愮煩褰㈠伐鍏枫戠粯鍒剁煩褰㈠～婊＄敾闈紝濉厖涓虹传鑹诧紝鐒跺悗銆愰攣瀹氬眰銆銆2.浣跨敤銆愭き鍦嗗伐鍏枫戠粯鍒跺渾褰紝灏嗗叾瀵归綈鐢婚潰涓績锛岄噸鍛藉悕灞備负榛勫渾锛屽睍寮銆愬睘鎬с戯紝闅愯棌銆愬～鍏1銆戯紝璋冩暣銆愭弿杈1銆戜笅鐨勯鑹蹭负榛勮壊锛岀劧鍚庤皟鍑恒愮缉鏀惧睘鎬с戯紝鏀惧ぇ鍦嗐3.璋冩暣銆愭弿杈1銆戜笅鐨勬弿杈瑰搴︿负715宸﹀彸锛...
绛旓細姝ラ1锛氬仛鍑哄熀鏈殑杩愬姩锛岃繖閲屽仛鐨勬槸涓涓粍鑹插皬鐞冨湪鐧借壊鍦嗙煩涓婃柟绉诲姩銆傛楠2锛氱粰鍚堟垚娣诲姞涓涓皟鑺傚眰锛屾斁鍦ㄦ渶涓婇潰銆傜粰璋冭妭灞傛坊鍔燵蹇熸ā绯奭鏁堟灉銆傛楠3锛氱粰璋冭妭灞傛坊鍔燵绠鍗曢樆濉炲伐鍏穄锛岃皟鑺傚悎閫傜殑鍙傛暟鍚庢敹宸ャ備簩銆佸舰鐘跺浘灞傜殑鍚堝苟璺緞+浣嶇Щ璺緞锛堣矾寰勫亸绉伙級姝ラ1锛氬仛濂藉熀鏈殑鍥惧舰杩愬姩锛屾墍鏈夌殑褰㈢姸閮借鍦ㄤ竴...
绛旓細涓銆鍩烘湰鏋勫缓 鍒涘缓杞満鏁堟灉鍚堟垚 姝ラ1 鎵撳紑AE,鍚堟垚>鏂板缓鍚堟垚(CmdN),灏哄涓640*1136,甯ф暟29,鎸佺画6s 姝ラ2. 瀵煎叆浼︽暒鑳屾櫙鍥惧儚,灏嗗浘鍍忎涪鍏ュ悎鎴1,璋冩暣鑳屾櫙鍥惧儚灏哄,浣垮叾閫傚悎鐢诲竷 姝ラ3 鍒涘缓3涓摑鑹叉(鐢ㄥ舰鐘跺浘灞),杩欎簺钃濊壊妗嗗皢浠庡睆骞曚笂鏂逛笅钀藉埌灞忓箷搴曢儴,瀹藉害213銆214銆213px銆備笁涓柟妗嗕笂鏂圭殑鏂规瀹藉害640px,杈撳叆...
绛旓細姝ラ涓锛氭坊鍔犳晥鏋淐CRadialFastBlur-CC寰勫悜蹇妯＄硦锛岄氳繃璋冩暣妯＄硦涓績鐐圭殑浣嶇疆锛屾帶鍒秎ogo鍙戝厜鏂瑰悜 姝ラ浜岋細娣诲姞鍙戝厜鏁堟灉锛岄氳繃璋冭妭鍙戝厜闃堝笺佸彂鍏夊崐寰勶紝澧炲己鍙戝厜寮哄害 姝ラ涓夛細娣诲姞鍕剧敾鏁堟灉锛屾澶勯渶瑕佸皢鍕剧敾鏁堟灉鎷栧埌绗竴涓綅缃紝鍙傛暟鎸変笅鍥捐皟鑺傦紝闀垮害鎸0->1鎵撳叧閿抚 鏈缁堝憟鐜 浠ヤ笂鎴戜滑灏辩敤AE杞欢鍒朵綔鍑烘潵浜嗛钀...
绛旓細1銆鍩虹鍔ㄧ敾 閫氳繃鎺у埗鍏冪礌鐨勫熀鏈灞炴ф潵瀹炵幇鍔ㄦ晥锛屼綅缃紙P锛夈佺缉鏀撅紙S锛夈佹棆杞紙R锛夈侀忔槑搴︼紙T锛変緥锛氬垪琛ㄥ厓绱犵敱宸﹀悜鍙虫粦鍔ㄥ嚭鐜扮殑鍔ㄦ晥 2銆佽矾寰勫姩鐢 璺緞鍔ㄧ敾灏辨槸鐗╀綋鎴栬呮煇涓厓绱犳寜鐓ц瀹氬ソ鐨勮矾寰勮繘琛岃繍鍔 渚1: 绾搁鏈虹殑杩愬姩 渚2: 閽堝拰绾跨殑杩愬姩 渚3: 姘存场娉＄殑杩愬姩 渚4: 鍗＄墖鐨勬粦鍔 3銆佷慨鍓矾寰...
绛旓細1銆侀鍏堟墦寮AE 2銆佹垜浠殑绱犳潗瀵煎叆AE涓紝灏嗗鍏ョ绫绘敼涓哄悎鎴愶紝鍥惧眰鏍峰紡鏀逛负鍙紪杈戠殑鍥惧眰鏍峰紡 3銆佺偣鍑籧g鍥惧眰锛屽湪鏁堟灉鏍忔悳绱㈠嚫鍑烘晥鏋滐紝鎷栧叆鍥惧眰涓 鍦ㄦ晥鏋滄帶浠堕噷锛屽皢姘村钩鍗婂緞鍜屽瀭鐩村崐寰勬敼涓300 鐐瑰嚮鍑稿嚭楂樺害锛屽湪鏃堕棿绾0绉掓墦涓婂叧閿抚锛岀Щ鍔ㄦ椂闂寸嚎鍒3甯э紝鍑稿嚭楂樺害鏀逛负1锛岀Щ鍔ㄦ椂闂寸嚎鍒6甯э紝鍑稿嚭楂樺害鏀逛负0 ...
绛旓細鏈夊緢澶氭柟娉曞彲浠ュ垱寤轰笅闆ㄥ姩鐢伙紝浣嗚繖娆℃垜浠皢閲嶇偣鍏虫敞AfterEffects(AdobeAfterEffects)濡備綍鍒朵綔涓嬮洦鍔ㄧ敾銆傛暀绋嬫瘮杈冪畝鍗曪紝瀹冩槸鍩烘湰鐨凙E鐗规晥鏁欑▼锛岃嚧鍔涗簬鏂版墜瀛︿範鍜鍏ラ棬AE銆傚簾璇濅笉澶氳锛岃刀绱ф搷浣滆捣鏉ワ細AE鍒朵綔涓嬮洦鍔ㄦ晥瑙嗛鏁堟灉鏁欑▼姝ラ锛氶鍏堬紝灏嗘偍鎯宠鍒朵綔鐨勫浘鍍忓鍏E涓綔涓鸿儗鏅浘鍍:鏂囦欢>瀵煎叆>鏂囦欢>閫夋嫨鎮ㄦ兂瑕佸埗浣滅殑...
绛旓細娆㈣繋鏉ュ埌濡傚閰眞鐨勫姩鐢绉樼睄锛佷粖澶╋紝璁╂垜浠竴璧锋帰绱9涓AE涓殑寮哄ぇ琛ㄨ揪寮忥紝璁╀綘鐨鍔ㄦ晥鍒朵綔鏁堢巼缈诲嶏紒</ 棣栧厛锛岀悊瑙ｈ〃杈惧紡鏄叧閿紝瀹冧滑鏄殣钘忓湪Adobe After Effects鑳屽悗鐨凧avaScript浠ｇ爜锛屼负澶嶆潅鍔ㄧ敾鎻愪緵浜嗗揩鎹烽氶亾锛屾棤闇棰戠箒璁剧疆鍏抽敭甯с傚彧闇閫変腑鎯宠鏀瑰彉鐨勫睘鎬э紝鎸変笅Alt閿紝鐐瑰嚮浠ｇ爜琛紝杈撳叆濡傗渨iggle(2,30...
