大家好， 【每周一个小教程】已经正式开始，要学习的小伙伴们一起进行交互动效设计、插画设计、2.5D插画设计、C4D等方面的练习，想一起学习的小伙伴可以加入进来，我们一起学习！

前两期我们的主题是：2.5D插画字体设计、2.5D插画设计之多彩魔方，今天，我们的主题是：用AE快速制作天气APP界面动效设计，先来看一下最终的效果图：

天气应用gif（据观测，小圆点弹的过了，各位制作的时候修改一下吧）

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

动态GIF展现UI作品，优点在于：

1、展示实际工作流程

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

3、便于网络分享。

■ 工具

Adobe After Effects CC2018（点击获取软件）

Adobe Photoshop CC2018（点击获取软件）

■ 设计流程

After Effects

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

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

3、导出

Photoshop

4. 优化GIF图像

■ 素材

伦敦背景图一张

手机透视效果模板一张

一、基本构建

创建转场效果合成 

步骤1

打开AE，合成>新建合成(Cmd+N)，尺寸为640x1136，帧数29，持续6s

步骤2

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

步骤3

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

步骤4

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

步骤5

保存一下

 

展示合成

步骤1

创建合成2

尺寸1280 x 720帧数29，时间6s

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

步骤3

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

步骤4.

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

二、动效制作

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

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

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

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

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

5. Snowy文字出现。

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

处理过程

首先推荐2个脚本插件Ease and wizz和Repostion Anchor Point

一个方便做运动曲线，一个方便设置锚点位置，2个脚本插件，U妹会一同打包到素材里分享给大家。

三个蓝色框

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

备注

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

2.比例从0-100%

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

透明框

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

备注：Ease and Wizz中设置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+Alt+Shift+S 或者 文件>储存为Web可用格式

备注：

1.循环选项选择永远

2.图像大小可以设置

3.注意选择Gif格式

方法2：LiceCap录制gif（U妹会一同打包到素材分享给大家）

如果你不想用PS的话，可以先调节AE中画布大小，再使用LiceCap这款录屏为Gif的小软件录制，很方便，堪称最好用的GIF录制软件。（有多平台版本）

录制效果

教程素材+源文件+脚本插件+录制gif软件地址： 

链接：https://pan.baidu.com/s/1n3zy0aBgqT38WXquoKFVCQ 密码：bo9m