《如何用AE制作简单的UI动效教程.docx》由会员分享，可在线阅读，更多相关《如何用AE制作简单的UI动效教程.docx（6页珍藏版）》请在三一办公上搜索。
1、如何用AE制作简单的UI动效教程如何用AE创建简单的UI动效 天气应用gif 文末提供源文件下载 在Dribbble和Behance上，你们可能见过很多用Gif来表达设计理念的UI作品。很多人都想知道怎么来制作，怎样更好、更高效的表达自己的理念。很明显，动态的展现比静态的更形象，在这片文章中，我将教大家如何“动态化”自己的设计作品。 动态GIF展现UI作品，优点在于： 1.展示实际工作流程 2.利用转场，来展示应用不同状态时的效果 3.便于网络分享。 工具 1.After Effects CS6 or CC 2.Photoshop CS6 or CC 设计流程 After Effects 1.
2、在一个合成中创建转场效果 2.另外一个合成中创建展示效果 3.导出 Photoshop 4. 优化GIF图像 素材 伦敦背景图一张 手机透视效果模板一张 一、基本构建 创建转场效果合成 步骤1 打开AE，合成新建合成(Cmd+N)，尺寸为640*1136，帧数29，持续6s 步骤2. 导入伦敦背景图像，将图像丢入合成1，调整背景图像尺寸，使其适合画布 步骤3 创建3个蓝色框，这些蓝色框将从屏幕上方下落到屏幕底部，宽度213、214、213px。三个方框上方的方框宽度640px,输入相应文本。 步骤4 用钢笔勾勒出云朵和6片雪花空心圆 步骤5 保存一下 展示合成 步骤1 创建合成2 尺寸1280
3、 x 720帧数29，时间6s 步骤 2. 导入iPhone背景,调整尺寸。 步骤3 把合成1拖到合成2里面，那么合成2里面应该是这样： 步骤4. 选中合成1，效果扭曲边角定位，让合成1的4个角对上模板中屏幕的4个角。 -以上为基本构建部分- 二、动效制作 下面，我们来分解一下动画 1.3个蓝色方框变长，不同时的落下 2.透明框从底部往上移动，自始至终宽度不变。 3.4个框抵达目的地后，文字开始出现，蓝色框文字是比例扩大+从不透明变透明，透明框中得文字是从不透明变透明。 4. 云朵图标，同时伴随雪花。 5. Snowy文字出现。 形状图层中，可以控制的属性有比例、位置、不透明度、描边等等，本文
4、的动效中，就充分利用了这些属性随时间的变化，打造出动画效果。 处理过程 首先推荐2个脚本插件Ease and wizz和Repostion Anchor Point 一个方便做运动曲线，一个方便设置锚点位置。 三个蓝色框 打开合成1，选中三个蓝色框，设置如下 备注 1.最左面和最右面的蓝色框锚点在上方 2.比例从0-100% 3.利用Ease and wizz选中关键帧，可以很方便的调节运动曲线。 透明框 透明框的运动，开始以很快的速度移动了大部分位移，后来速度减慢，缓缓移动到原位，设置如下 备注：Ease and Wizz中设置Quad+out 运动效果比较平滑。 底部文字 备注： 1.三个
5、蓝色框，当蓝色框触及到底部时，文字快速弹出，不透明度从0-100%,比例从0-100% 2.透明框中的文字随透明框一起运动，但是，左侧的文字先到，右侧的-4度后到，注意时间轴中得设置。 云朵 当透明框的文本开始出现时，云朵出现，先是透明度从0-100%。 而比例开始时是60%，当透明度到了100%时，从60%-100% 雪花小圆点 当云朵动效完成后，雪花小圆点开始逐个出现。 备注： 1.注意小圆点会错落的向右移动，然后弹回，注意运动顺序的调节 2.此次也建议用Quad+Out 3.注意小圆点逐个出现，因此透明度的变化要在时间轴上依次设置。 Snowy文字效果 这里运用了蒙版运动，来打造Snow
6、y文本逐渐出现的效果，注意Snowy不透明度也要变化 效果： 原作者的做法： 效果： 结果： -以上为动画制作部分- 三、导出 方法1：AE+PS 1.保存后，AE中合成添加到渲染队列 完成设置后，点渲染 2.用PS打开渲染出来的.mov(文件导入视频帧到图层） 3.Cmd+Shift+S 或者 文件储存为Web可用格式 备注： 1.循环选项选择永远 2.图像大小可以设置 3.注意选择Gif格式 方法2：LiceCap 如果你不想用PS的话，可以先调节AE中画布大小，再使用LiceCap这款录屏为Gif的小软件录制，很方便，堪称最好用的GIF录制软件。 录制效果： 另外需要更多其他资源的话可以加下这个技术群：452161822里面都是一些同样志同道合的朋友，旨在相互学习交流，也经常会相互分享资源，探讨问题什么的。另外推荐一个还不错的网站
