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

1、精心整理如何用AE创建简单的UI动效天气应用gif （据观测，小圆点弹的过了，各位制作的时候修改一下吧）文末提供源文件下载在Dribbble和Behanee上，你们可能见过很多用 Gif来表达设计理念的UI作品。很多人都想知 道怎么来制作，怎样更好、更高效的表达自己的理念。很明显，动态的展现比静态的更形象，在这 片文章中，我将教大家如何“动态化”自己的设计作品。动态GIF展现UI作品，优点在于：I I -*,I ”_ 1/1. 展示实际工作流程2. 利用转场，来展示应用不同状态时的效果3. 便于网络分享。F- 11 i I工具1. AfterEffectsCS6orCC卞-2. Photosh

2、opCS6orCC、 I I设计流程AfterEffects1. 在一个合成中创建转场效果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

3、1 IX/ / I ;步骤5?保存一下1If展示合成步骤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、+从不透明变透明，透明框中得文字是从不透明变透明。4. 云朵图标，同时伴随雪花。5.Snowy文字出现。形状图层中，可以控制的属性有比例、位置、不透明度、描边等等，本文的动效中，就充分利用了 这些属性随时间的变化，打造出动画效果。处理过程-来源网络精心整理首先推荐 2 个脚本插件 Easeandwizz 和 RepostionAnchorPoint一个方便做运动曲线，一个方便设置锚点位置。三个蓝色框打开合成1,选中三个蓝色框，设置如下备注1. 最左面和最右面的蓝色框锚点在上方（利用An chorPoi nt插件设置）2. 比例从0-100%3. 利用Easeandwizz选中关键帧，可以很方便

5、的调节运动曲线。X M I : /I , X 透明框透明框的运动，开始以很快的速度移动了大部分位移，后来速度减慢，缓缓移动到原位，设置如下备注：EaseandWizz中设置Quad+out 运动效果比较平滑。、 % X I 1底部文字备注：1. 三个蓝色框，当蓝色框触及到底部时，文字快速弹出，不透明度从0-100%,比例从0-100%2. 透明框中的文字随透明框一起运动（位置设置可以参考透明框），但是，左侧的文字先到，右侧的-4度后到，注意时间轴中得设置。-来源网络精心整理云朵当透明框的文本开始出现时，云朵出现，先是透明度从0-100%而比例开始时是60%，当透明度到了 100%时，从60%-

6、100%雪花小圆点当云朵动效完成后，雪花小圆点开始逐个出现。.I I .-.II I1 7史|#. L _ _*亠 J1-J| 7-! J 备注：1 ,礼.f J J / I I I /_ rL 左 F、丄/ / / ,1. 注意小圆点会错落的向右移动，然后弹回，注意运动顺序的调节I.尸才Qp7 jIr /2. 此次也建议用Quad+Out3. 注意小圆点逐个出现，因此透明度的变化要在时间轴上依次设置。| | 广、.| i八L.ISnowy文字效果L 、X 弋丄/|（ . * j % I”这里运用了蒙版运动，来打造 Snowy文本逐渐出现的效果，注意 Snowy不透明度也要变化（蒙版的不透明度变化是多余，请勿模仿）效果：原作者的做法：效果：结果：-来源网络精心整理 以上为动画制作部分三、导出方法 1: AE+PS:| I.-1保存后，AE中合成 添加到渲染队列）j完成设置后，点渲染2. 用PS打开渲染出来的.mov（文件 导入 视频帧到图层）x 尹“ I x X、:3. Cmd+Shift+S 或者文件 储存为 Web可用格式备注：1 |1. 循环选项选择永远2. 图像大小可以设置I, r,I X I3. 注意选择Gif格式、 I I方法 2: LiceCap如果你不想用PS的话，可以先调节AE中画布大小，再使用LiceCap这款录屏为Gif的小软件录制，