前两期我们的主题是：APP抽屉式导航交互动效设计练习、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录制软件。（有多平台版本）
录制效果
请私信我回答“666”，为严哥打Call~，还有更多惊喜哦~
.............................................................
UI严选—越努力，越幸运