AE制作简单的常见动态效果
我们在进行交互设计的时候，大部分时间是基于界面和功能逻辑的考虑，也适当的进行了交互效果的考虑，那么我们如何把交互的效果直观的表现出来呢，除了用axure做出交互的动态效果，ps绘制GIF图，代码设计动效外，
还可使用一个非常容易上手的工具，那就是Adobe 的AE，AE是一款强大的后期软件，同时也可以用来制作不少
直观的动效预览效果。
常见的动效有：缩放，渐变，透明度变化，旋转，左右滑进，左右滑出，跳动，颜色变化等。
1.首先安装完AE后打开，界面默认居中是预览，左边是素材窗口，下方是时间轴和图层。
我们可以右键导入素材，或者在AE里面直接用上方的工具进行绘制来制作想要的效果。素材拖动到图层去，上方的预览区
就可以看到我们放进去的素材了。
2.因为比较简单的效果，这里我是直接在AE里面绘制一些简单图形，放到图层窗口中，我们先做一个位移的效果，举一反三
很快就能上手了。
点击三角符号展开图层的各种效果属性，打开变换，右侧拖动红色那条线上面的蓝色滑块调节时间，从0s开始所以把指针拖到0s，
在左边点击 位置前面的类似闹钟的图标，开始记录关键的帧数。
然后拖动指针到01s再调节位置后面的坐标参数，我这里是做Y轴的变化，所以就只调节Y轴坐标的数值就可以。
这样从0到1s的位置就发生了沿着Y坐标的位置移动的效果。除了位移外，缩放旋转这些也是同样的道理。
3.现在我们来试一下封面图的制作，我们新建一个项目组，在素材区点击右键新建合成，调节时长其他默认即可。
用上面的矩形画两个大小为560*210(宽高合适也行，不一定要这个)的矩形，填充一些不同的颜色，拖动到画布
外面对齐，第一个效果是上下的图形向中间移动，所以是沿着Y轴移动的变化，利用位置关键帧来调节，沿着Y/X轴
坐标参数，这里是第0帧的状态 (x:281，y：897.4)
下面看0.05s的状态，注意看X/Y轴坐标数据的变化，Y轴的数据变成了649.4了，所以这就是一个Y轴变化的关键帧动画。
4.利用不同的变化效果去调节关键帧，就能做到缩放旋转渐变等效果了。另外素材拖入图层是默认占全部时长的
可以通过时间轴拖动来调节素材长短来决定显示的时间。点击素材后鼠标放到左右会出现拖动的鼠标指针，这时
就能拖动来调节了，在英文输入状态下，IO和[ ]这四个键可以快速对齐拖动的指针，衔接不同的素材。
6.通过对不同的效果进行调节关键帧，然后展开所有的关键帧选中，按F9打开曲线编辑器，模拟真实的运动状态。
对运动曲线感兴趣的同学可以点击这里查看一位大神对运动曲线的分析。
7. 效果做好后可以预览一下，没问题就可以合成了，合成快捷键OSX (shift+command+M),WIN(Ctrl+M)
因为我们要导出GIF图，所以就渲染为图片的序列帧，然后倒入PS储存为WEB格式就可以了。渲染的参数设置为
JPEG序列或者png序列都可以，考虑到大小所以选择JPEG格式。
8.确定后点击渲染，渲染后的图片用ps打开，勾选图像序列，然后点文件-导出-存储为WEB，格式选择GIF。
再做其他一些参数调节，尽量控制图像质量和文件大小的平衡，一个动态效果的预览就做好了，基本上熟
悉的话，很快就能搞定一些简单或者中等难度的效果了。
9.因为动效涉及到物理学，所以我们可以观察一些基本事物的运动特征，可以通过运动曲线来调节动效，
才能在交互设计中起到一些锦上添花的效果，同时UI和交互或者产品不一定要非常专业的来制作动效，
学习一些简单的小技能，在工作起到一定的作用就算是可以了，毕竟还有专业的动效设计师在嘛。
10.最后放张做了2个小时的效果图，拙劣之处还望大神们不吝赐教。
绛旓細7.AE璺緞鍔ㄧ敾 棣栧厛:褰㈢姸灞傦紝娣诲姞淇壀璺緞锛屽紑濮嬶紝缁撴潫鍜屽亸绉绘帶鍒惰矾寰勫姩鐢伙紝浣跨敤鎵鏈夌洿绾匡紝鏃犺鏄洿绾胯繕鏄洸绾;绗簩:濡傛灉浣犳兂鍒涘缓涓涓彂鍏夎矾寰勭殑鍔ㄧ敾锛屼娇鐢ㄥ浐浣撳眰骞舵坊鍔犲啗鍒鏁堟灉鎺у埗鏉ヨВ鍐冲厜婊戠殑鏇茬嚎鍜岃钀姐傜涓:瀹炲績娣诲姞绗旂敾鐗规晥锛岃揪鍒版敞鎰忔晥鏋滀笉鑳藉お寮猴紝鏈﹁儳鍏夋祦灏辫;8.鏂囨湰娌跨潃璺緞绉诲姩 杩愬姩鍘熷垯:缁欏畾...
绛旓細18.璋冩暣钃濊壊铦磋澏銆怹杞存棆杞戜负0x55掳璋冩暣鍏惰搴︼紝鐒跺悗灏嗚澊铦1鍚堟垚鎷栧叆鑷宠澊铦1灞備笂鏂癸紝鐩稿悓鏂规硶鍒朵綔寮х嚎绉诲姩鐨勬晥鏋锛岀劧鍚庝负bg02灞傛坊鍔犮鍔ㄦ鎷艰创銆戞晥鏋滐紝璋冩暣杈撳嚭瀹藉害涓680锛屽仛鍑哄彸渚х殑妤兼埧鍥炬銆19.銆愭柊寤-绾壊銆戦鑹蹭负鐧借壊锛屾墦涓娿愪笉閫忔槑搴︺戝叧閿抚锛屼娇鍏跺湪绗0绉掍负100%锛屽悗鍑犲抚涓0%锛屽仛鍑虹櫧鑹插紑鍦烘晥...
绛旓細1銆佸熀纭鍔ㄧ敾 閫氳繃鎺у埗鍏冪礌鐨勫熀鏈睘鎬ф潵瀹炵幇鍔ㄦ晥锛屼綅缃紙P锛夈佺缉鏀撅紙S锛夈佹棆杞紙R锛夈侀忔槑搴︼紙T锛変緥锛氬垪琛ㄥ厓绱犵敱宸﹀悜鍙虫粦鍔ㄥ嚭鐜扮殑鍔ㄦ晥 2銆佽矾寰勫姩鐢 璺緞鍔ㄧ敾灏辨槸鐗╀綋鎴栬呮煇涓厓绱犳寜鐓ц瀹氬ソ鐨勮矾寰勮繘琛岃繍鍔 渚1: 绾搁鏈虹殑杩愬姩 渚2: 閽堝拰绾跨殑杩愬姩 渚3: 姘存场娉＄殑杩愬姩 渚4: 鍗＄墖鐨勬粦鍔 3銆佷慨鍓矾寰...
绛旓細鐩磋鐨勫姩鏁堥瑙堟晥鏋溿甯歌鐨勫姩鏁堟湁锛氱缉鏀撅紝娓愬彉锛岄忔槑搴﹀彉鍖栵紝鏃嬭浆锛屽乏鍙虫粦杩涳紝宸﹀彸婊戝嚭锛岃烦鍔紝棰滆壊鍙樺寲绛銆1.棣栧厛瀹夎瀹孉E鍚庢墦寮锛岀晫闈㈤粯璁ゅ眳涓槸棰勮锛屽乏杈规槸绱犳潗绐楀彛锛屼笅鏂规槸鏃堕棿杞村拰鍥惧眰銆傛垜浠彲浠ュ彸閿鍏ョ礌鏉愶紝鎴栬呭湪AE閲岄潰鐩存帴鐢ㄤ笂鏂圭殑宸ュ叿杩涜缁樺埗鏉ュ埗浣滄兂瑕佺殑鏁堟灉銆傜礌鏉愭嫋鍔ㄥ埌鍥惧眰鍘伙紝涓婃柟鐨勯瑙堝尯...
绛旓細1銆佹彃鍏ラ渶瑕佺紪杈戠殑2寮犲浘鐗囷紝骞朵笖璁剧疆澶у皬涓哄叏灞忥紝鏈枃涓烘紨绀烘柟渚挎墍浠ュ皢2寮犲浘鐗囬敊寮浜嗭紝濡傚浘鎵绀猴紝浠ユ柟渚胯瑙ｃ2銆佺粰2寮犲浘鐗囨彃鍏ュ姩鐢鏁堟灉锛屾湰鏂囦互椋炲叆涓轰緥锛屾甯告儏鍐典笅闇瑕佺殑鍔ㄧ敾鏁堟灉鏍规嵁瑕佹眰鑷缂栬緫銆3銆佹牴鎹紪杈戝姩鐢绘晥鏋滅殑鍏堝悗椤哄簭绯荤粺浼氳嚜鍔ㄧ粰鍥剧墖缂栧彿锛岀涓寮犱负1锛岀浜屽紶涓2锛屽浘鐗囦腑绗簩寮犳槸闂數鏍囧織...
绛旓細棣栧厛锛屾槑纭洖绛旀槸锛氬湪AE锛圓fter Effects锛変腑鍒朵綔鍔ㄧ敾涓昏娑夊強鍒板浘灞傛搷浣溿佸叧閿抚璁剧疆銆佹椂闂寸嚎璋冩暣鍜鏁堟灉搴旂敤绛夋楠ゃ傚湪AE涓埗浣滃姩鐢荤殑鍩虹鏄浘灞傘傜敤鎴峰彲浠ュ鍏ュ悇绉嶇被鍨嬬殑鍥惧眰锛屽瑙嗛銆佸浘鍍忋侀煶棰戠瓑锛屾瘡涓浘灞傞兘鍙互鐙珛杩涜鍔ㄧ敾璁剧疆銆備緥濡傦紝鍙互瀵煎叆涓寮犻潤鎬佺殑鍥惧儚浣滀负鑳屾櫙灞傦紝鐒跺悗鍦ㄥ叾涓婃柟娣诲姞澶氫釜鍔ㄦ鍥惧眰鏉...
绛旓細浠婂ぉ灏忕紪涓哄ぇ瀹跺垎浜AE绠鍗曞埗浣滅殑涓涓鍔ㄦ灏忚儗鏅柟娉曪紝鏁欑▼姣旇緝鍩虹锛岄傚悎鏂版墜鏉ュ涔狅紝涓璧锋潵鐪嬬湅鍚э紒杞欢鍚嶇О锛欰dobe After Effects CS3 涓枃缁胯壊鍏嶈垂鐗堣蒋浠跺ぇ灏忥細138MB鏇存柊鏃堕棿锛2016-03-19鎴戜滑棣栧厛鐪嬩竴涓鏁堟灉鍥俱備笅闈㈡槸鍏蜂綋鐨勫埗浣滄楠わ細1銆佹柊寤虹珛涓涓悎鎴愩3銆佽缃鍥俱4銆佹搷浣滃鍥俱5銆佹搷浣滃鍥俱傛坊鍔...
绛旓細AE瑙嗛鍒朵綔蹇呮帉鎻″皬鎶宸у垎浜細瑕佸埗浣滈『搴忓姩鐢伙紝鍙互浣跨敤搴忓垪鍥惧眰鍔熻兘锛屽彲浠ュ揩閫熷缓绔嬮『搴忓姩鐢汇傚叧閿抚浣嶇疆闇瑕佷慨鏀癸紝鍙堜笉鑳界牬鍧忓叧閿抚涔嬮棿鐨勮窛绂绘瘮渚嬪叧绯伙紝鍙互閫変腑鎵鏈夊叧閿锛屾寜浣廇LT/Opt閿紝鍐嶆嫋鍔ㄦ渶鍚庝竴涓叧閿抚銆傛寜涓嬧淎LT/Opt+r鈥濆彲浠ュ皢鈥滃綋鍓嶆椂闂存寚绀哄櫒鈥濈殑鍓嶉儴鍥惧眰鏂紑锛屾寜涓嬧淎LT/Opt+]鈥濆彲浠ュ皢...
绛旓細1銆佹墦寮AE锛屾柊寤烘枃妗ｏ紝澶у皬鑷畾锛屾椂闂翠负5s 2銆佹柊寤轰竴绾壊鍥惧眰锛坈trl+y锛,璁剧疆棰滆壊涓鸿摑鑹 3銆侀変腑绾壊鍥惧眰锛岀偣鍑荤煩褰㈠伐鍏凤紝缁欏浘灞傛柊寤鸿挋鐗 4銆佸湪鏁堟灉鍜岄璁剧獥鍙ｏ紝鎵惧埌鎵洸-娉㈠舰鍙樺舰锛屾妸瀹冩媺鍒扮函鑹插浘灞備笂锛屽苟璁剧疆鍙傛暟濡傛渶鍚庝竴寮犲浘 5銆佷笉閫夋嫨浠讳綍鍥惧眰锛岄夋嫨妞渾宸ュ叿锛岀粯鍒舵き鍦嗭紝棰滆壊鎻忚竟鍧囦笉鐢ㄨ缃傚ぇ灏...
绛旓細AE甯哥敤鍔ㄦ晥鍒嗕韩锛氫竴銆佹枃浠跺鍏 1銆佷粠PSD瀵煎叆-PSD鏂囦欢瀵煎叆AE AE涓嶱S鏈夊緢濂界殑鍏煎鎬э紝PS鐨勫浘灞備互鍙婂悇绉嶆牱寮忛兘鑳芥棤鍋忓樊鐨勫鍏ュ埌AE涓紝鍦ㄥ鍏ユ椂灏嗏滃鍏ヤ负鈥濋夋嫨锛氬悎鎴-淇濇寔鍥惧眰澶у皬锛屽浘灞傞夐」閫夋嫨鈥滃彲缂栬緫鐨勫浘灞傛牱寮忊漰sd鏂囦欢瀵煎叆闈㈡澘 2銆丄EUX-Sketch瀵煎叆AE AEUX锛堝墠韬彨Sketch2AE锛夋槸鐢盙oogle鍥㈤槦鍔ㄧ敾璁捐...
