这篇教程教飞特的AE学习者们使用AE制作APP界面动效，AE原本是做影视后期特效的，但是制作出来的动效GIF能力超群，所以现在很多的效果也被运用到APP程序的界面效果制作中，这篇教程制作的几个动效都非常实用，推荐一下，喜欢的朋友记得给我好评啦！

FEVTE编注：更多After Effects实例教程学习交流和After Effects作品发布请访问飞特网After Effects实例教程栏目，地址：https://www.fevte.com/moive/AE/AESL/

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

提供源文件下载

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

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

• 展示实际工作流程
• 利用转场，来展示应用不同状态时的效果
• 便于网络分享。

工具

• After Effects CS6 or CC
• Photoshop CS6 or CC

设计流程

After Effects

1. 在一个合成中创建转场效果
2. 另外一个合成中创建展示效果
3. 导出

Photoshop
   4. 优化GIF图像

素材

伦敦背景图一张

手机透视效果模板一张

一、基本构建

创建转场效果合成 

步骤1

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

步骤2.

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

步骤3

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

步骤4

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