如何用AE创建简单的UI动效

~

在dribbble和behance上，你们可能见过很多用gif来表达设计理念的ui作品。很多人都想知道怎么来制作，怎样更好、更高效的表达自己的理念。很明显，动态的展现比静态的更形象，在这片文章中，我将教大家如何“动态化”自己的设计作品。

动态gif展现ui作品，优点在于：

1.展示实际工作流程

2.利用转场，来展示应用不同状态时的效果

3.便于网络分享。

aftereffectscs6orcc

photoshopcs6orcc

aftereffects

1.在一个合成中创建转场效果

2.另外一个合成中创建展示效果

photoshop

4.优化gif图像

伦敦背景图一张

手机透视效果模板一张

一、基本构建

创建转场效果合成

打开ae，合成>新建合成(cmd+n)，尺寸为640*1136，帧数29，持续6s

导入伦敦背景图像，将图像丢入合成1，调整背景图像尺寸，使其适合画布

创建3个蓝色框（用形状图层），这些蓝色框将从屏幕上方下落到屏幕底部，宽度213、214、213px。三个方框上方的方框宽度640px,输入相应文本。

用钢笔勾勒出云朵和6片雪花空心圆（勾勒的略水，见谅）

创建合成2

尺寸1280x720帧数29，时间6s

步骤2.导入iphone背景,调整尺寸。

把合成1拖到合成2里面，那么合成2里面应该是这样：（p.s，我加了一层背景层）

选中合成1，效果>扭曲>边角定位，让合成1的4个角对上模板中屏幕的4个角。

二、动效制作

下面，我们来分解一下动画：

1.3个蓝色方框变长，不同时的落下

2.透明框从底部往上移动，自始至终宽度不变。

3.4个框抵达目的地后，文字开始出现，蓝色框文字是比例扩大+从不透明变透明，透明框中得文字是从不透明变透明。

4.云朵图标，同时伴随雪花。

5.snowy文字出现。

形状图层中，可以控制的属性有比例、位置、不透明度、描边等等，本文的动效中，就充分利用了这些属性随时间的变化，打造出动画效果。

首先推荐2个脚本插件easeandwizz和repostionanchorpoint

一个方便做运动曲线，一个方便设置锚点位置。

三个蓝色框

打开合成1，选中三个蓝色框，设置如下

1.最左面和最右面的蓝色框锚点在上方（利用anchorpoint插件设置）

2.比例从0-100%

3.利用easeandwizz选中关键帧，可以很方便的调节运动曲线。

透明框的运动，开始以很快的速度移动了大部分位移，后来速度减慢，缓缓移动到原位，设置如下

备注：easeandwizz中设置quad+out运动效果比较平滑。

1.三个蓝色框，当蓝色框触及到底部时，文字快速弹出，不透明度从0->100%,比例从0->100%

2.透明框中的文字随透明框一起运动（位置设置可以参考透明框），但是，左侧的文字先到，右侧的-4度后到，注意时间轴中得设置。

当透明框的文本开始出现时，云朵出现，先是透明度从0-100%。

而比例开始时是60%，当透明度到了100%时，从60%->100%

雪花小圆点

当云朵动效完成后，雪花小圆点开始逐个出现。

1.注意小圆点会错落的向右移动，然后弹回，注意运动顺序的调节

2.此次也建议用quad+out

3.注意小圆点逐个出现，因此透明度的变化要在时间轴上依次设置。

snowy文字效果

这里运用了蒙版运动，来打造snowy文本逐渐出现的效果，注意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录制软件。（有多平台版本）

录制效果：

cocoachina是全球最大的苹果开发中文社区，官方微信每日定时推送各种精彩的研发教程资源和工具，介绍app推广营销经验，最新企业招聘和外包信息，以及cocos2d引擎、cocosstudio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态，微信在手，天下我有！Ps、Flash、Ae都可以，用在交互动效中flash就可以AE是纯粹的视觉特效软件虽然定位是影视后期，但是网页也有使用，作为UI设计师用AE只能说你很新潮很厉害，AE也有自己基于JavaScript语言的表达式来实现高级动画控制，目前来看AE现在用的最多的领域是CG、多媒体行业的领域。

Flash给大多数人的印象，这是一个矢量动画软件，但是容易忽略的一点就是动画并非是Flash的全部，它并不像AE一样纯粹的构建视觉特效它还可以做游戏、做网站开发，能做很多东西一个明显的特征就是“交互性”，比如玩游戏就是一种交互。

作为UI设计师flash用于做动效就可以，毕竟AE做出来的东西更适合看。

如何用AE来实现6种最基本的动效
答：通过控制元素的基本属性来实现动效，位置（P）、缩放（S）、旋转（R）、透明度（T）例：列表元素由左向右滑动出现的动效 2、路径动画 路径动画就是物体或者某个元素按照设定好的路径进行运动 例1: 纸飞机的运动 例2: 针和线的运动 例3: 水泡泡的运动 例4: 卡片的滑动 3、修剪路径动画 通过在...

AE礼物盒动效怎么制作?
答：1、将Ai文件导入Ae后从矢量图层创建形状，然后删除Ai图层，结果如下图所示。2、观察分析动画：拉花先打开，然后是系带打开，紧接着礼盒盖打开，然后蹦出来很多小玩意儿（有的飞出来之后消失了，有的又落回了礼盒中。3、我们先来做拉花打开的动效，使用修剪路径，第10帧开始为0，第25帧开始为100%，并...

9 个拿来就能用的 AE 表达式!一分钟搞定高难度动效
答：欢迎来到如如酱w的动画秘籍！今天，让我们一起探索9个AE中的强大表达式，让你的动效制作效率翻倍！</ 首先，理解表达式是关键，它们是隐藏在Adobe After Effects背后的JavaScript代码，为复杂动画提供了快捷通道，无需频繁设置关键帧。只需选中想要改变的属性，按下Alt键，点击代码表，输入如“wiggle(2,30...

AE怎么制作3D旋转Tabbar动效?AE制作3D旋转Tabbar动效教程
答：此步需要一个小插件“Motion2”做弹动，在公众号回复关键词“Motion2”就可以获取到，此插件做弹动比较方便，安装也不麻烦的～但也不是必须。若不想安装，可在“缩放”手动k帧，若不太会操作请移步此视频[AE教程]超级简单的TabBar动效从8分20秒开始看哦～点开「窗口」→点“Motion2”选中“缩放...

AE制作APP界面gif动画效果
答：可以通过运动曲线来调节动效，才能在交互设计中起到一些锦上添花的效果，同时UI和交互或者产品不一定要非常专业的来制作动效，学习一些简单的小技能，在工作起到一定的作用就算是可以了，毕竟还有专业的动效设计师在嘛。8.最后放张做了2个小时的效果图，拙劣之处还望大神们不吝赐教。

AE制作超炫路径动效教程
答：这篇教程教AE特效学习者们，和APP界面动画制作学习者们使用AE制作超炫路径动效教程，教程非常实用。在APP的动效中算是非常酷炫的效果了，推荐过来和飞特网的朋友们一起分享一起学习，希望大家喜欢这篇教程，我们先来看看最终的效果图吧：   首先，准备素材，我采用直接在手机截屏的方法...

AE数据图表可视化动效怎么做?AE数据图表可视化动效制作教程
答：AE数据图表可视化动效制作教程：1.打开AE软件，【新建合成】Info，宽度和高度为1920×1080像素，帧速率为30帧/秒，持续时间为10秒。2.使用【文字工具】打出“$”，调整位置大小，对齐画面中心。3.使用【矩形工具】在后方绘制与“$”等大的矩形，设置【轨道遮罩-Alpha遮罩】，使用【锚点工具】将其锚点...

AE动效形式有哪些?
答：AdobeAfterEffects是Adobe公司发布的专业视频处理软件。它也是用户经常用来合成2D和3D动画和视觉效果的工具。通过它，用户可以有效准确地创建无数种引人注目的动态图像和令人惊叹的视觉效果视频。现在学习AE视频剪辑的小伙伴，应该对于动效学习都倍感难受吧！怎么学都学不会学不好！对于AE动效学习，下面我们就...

AE怎样做垃圾桶磨砂玻璃icon动效?
答：AE做垃圾桶磨砂玻璃icon动效教程：1、将Ai文件导入Ae后从矢量图层创建形状，然后删除Ai图层，结果如下图所示。2、分析动画：桶盖以右边支点为中心旋转式打开；紧接着垃圾以抛物线为路径从画面外飞入垃圾桶；桶盖合上；垃圾桶发生形变，在恢复变形的瞬间垃圾被粉碎。3、先对图层的父子级关系进行绑定，“三...

AE怎么制作圆圈动效展示栏目包装?制作图文教程分享
答：AE圆圈动效展示栏目包装制作图文教程：1.在制作之前先来对本次案例成品进行浏览：2.【新建合成】合成1，宽度和高度为1080×608像素，帧速率为25帧/秒，持续时间为30秒。3.【双击】【矩形工具】创建矩形，添加【四色渐变】效果，调整做出背景色。4.使用【椭圆工具】绘制正圆，添加【图层样式-内阴影】，...