如何用AE制作简单的UI动效教程.doc

精心整理 如何用AE创建简单的UI动效 天气应用gif （据观测，小圆点弹的过了，各位制作的时候修改一下吧） 文末提供源文件下载 在Dribbble和Behanee上，你们可能见过很多用 Gif来表达设计理念的UI作品。很多人都想知 道怎么来制作，怎样更好、更高效的表达自己的理念。很明显，动态的展现比静态的更形象，在这 片文章中，我将教大家如何“动态化”自己的设计作品。 动态GIF展现UI作品，优点在于： \ I I - * , • I — ” _ 1 \ / 1. 展示实际工作流程 2. 利用转场，来展示应用不同状态时的效果 3. 便于网络分享。 F - ■ 11 i I 工具 1. AfterEffectsCS6orCC 卞-」 2. PhotoshopCS6orCC 、\ I I 设计流程 AfterEffects 1. 在一个合成中创建转场效果 2. 另外一个合成中创建展示效果 精心整理 3. 导出 Photoshop ??4.优化GIF图像 —、基本构建 创建转场效果合成？ 步骤1 ?打开AE,合成 新建合成（Cmd+N），尺寸为640*1136，帧数29，持续6s 步骤2. ?导入伦敦背景图像，将图像丢入合成 1，调整背景图像尺寸，使其适合画布 精心整理 步骤3 创建3个蓝色框（用形状图层），这些蓝色框将从屏幕上方下落到屏幕底部，宽度213、214、213px 三个方框上方的方框宽度640px,输入相应文本。 步骤4 用钢笔勾勒出云朵和6片雪花空心圆（勾勒的略水，见谅） I L- 1 \ 1 IX / / I ; 步骤5 ?保存一下 1 If 展示合成 步骤1? ; — \ \ * I 创建合成2 尺寸1280x720帧数29，时间6s 步骤2.?导入iPhone背景，调整尺寸。 步骤3 把合成1拖到合成2里面，那么合成2里面应该是这样：（p.s，我加了一层背景层） 精心整理 步骤4. 选中合成1,效果 扭曲 边角定位，让合成1的4个角对上模板中屏幕的4个角 以上为基本构建部分 二、动效制作 I 1 / / \\ 7 I / ; / . J I 下面，我们来分解一下动画 I..、鳥；:工 ./,-/ 丿） 1.3个蓝色方框变长，不同时的落下 2. 透明框从底部往上移动，自始至终宽度不变。 3.4个框抵达目的地后，文字开始出现，蓝色框文字是比例扩大 +从不透明变透明，透明框中得文 字是从不透明变透明。 4. 云朵图标，同时伴随雪花。 5.Snowy文字出现。 形状图层中，可以控制的属性有比例、位置、不透明度、描边等等，本文的动效中，就充分利用了 这些属性随时间的变化，打造出动画效果。 处理过程精心整理 首先推荐 2 个脚本插件 Easeandwizz 和 RepostionAnchorPoint 一个方便做运动曲线，一个方便设置锚点位置。 三个蓝色框 打开合成1,选中三个蓝色框，设置如下 备注 1. 最左面和最右面的蓝色框锚点在上方（利用 An chorPoi nt插件设置） 2. 比例从0-100% 3. 利用Easeandwizz选中关键帧，可以很方便的调节运动曲线。 X 』M I \ : / I , X 透明框 透明框的运动，开始以很快的速度移动了大部分位移， 后来速度减慢，缓缓移动到原位，设置如下 备注：EaseandWizz中设置Quad+out 运动效果比较平滑。 、、 \ % \ X I 1 底部文字 备注： 1. 三个蓝色框，当蓝色框触及到底部时，文字快速弹出，不透明度从 0-100%,比例从0-100% 2. 透明框中的文字随透明框一起运动（位置设置可以参考透明框），但是，左侧的文字先到，右侧 的-4度后到，注意时间轴中得设置。 -来源网络 精心整理 云朵 当透明框的文本开始出现时，云朵出现，先是透明度从 0-100% 而比例开始时是60%，当透明度到了 100%时，从60%-100% 雪花小圆点 当云朵动效完成后，雪花小圆点开始逐个出现。 . I I ■ . - . I I I1 7史 | # . L— _ _~*亠 J 1 - J | ■■■■ 7--— ! J 备注： 1 ■■■ , 礼.f J J / I \ \ I I ■ / / _• ■ r L 左 F、丄 / / / , 1. 注意小圆点会错落的向右移动，然后弹回，注意运动顺序的调节 I.. 尸才Qp 7 j I r / / 2. 此次也建议用Quad+Out 3. 注意小圆点逐个出现，因此透明度的变化要在时间轴上依次设置。 | | 广、. | i 八「L..I Snowy文字效果 L \ 、、X 弋丄/ | （ \ . \ \ * j \ % \ I” 这里运用了蒙版运