学习AE的必要性
UI是基于静态页面来设计的，页面之间通过跳转切换。但是在设计过程中，设计师很重视单页的视觉效果，却经常忽略了对页面间跳转的处理。页面增加动效可以增强产品的趣味性和氛围。
动效的重要性：
功能性：动效能够在一定层面上解决用户的需求，比如优化用户对界面的感知，引起用户注意，提供用户操作后的视觉反馈可以帮助用户为下一步操作做准备；
物理性：让UI符合空间逻辑并根据物理定律制作动画，定义屏幕和UI设计元件之间的空间相对关系。当设计时考虑到重力、惯性、速度和刚性等因素，动效就会显得相对真实；
趣味性：在页面中加入一些有趣的动画，能够让用户眼前一亮，印象深刻。
认识After Effects
大多数时候，当设计师在接触一款新的设计软件时，最重要的就是先了解软件的基础面板和常用的命令模块。AE面板界面主要包括菜单栏、顶部工具栏面板、项目面板、视图窗口区(动画展示区域)、图层编辑区、时间轴、视窗信息展示面板区、预览播放面板、效果面板。接下来我们就详细了解一下AE的各个面板。
熟悉各个面板和对应的命令模块，可以提高我们的操作效率，于此同时，大家可以根据自己的爱好和习惯自由安排面板布局，面板布局并没有具体限制和约束。
AE基础面板介绍
1.菜单栏
菜单栏的功能命令贯通了整个AE动效的制作流程。从文件选项的新建项目、打开项目导入导出素材，然后再到编辑选项的粘贴、剪切、复制，再到合成选项的合成新建以及设置及预渲染的合成，到图层选项的图层新建设置以及蒙版和路径的一个绘制。再到效果选项的一个效果添加，再到动画选项的一个关键帧及曲线的一个调整都贯到整个AE的一个制作的流程。
窗口选项栏，它里面主要就是针对我们所能看到的这个AE界面的各个面板的调用，窗口选项栏打了勾的功能，就能在AE界面中显示该面板，而没有打勾的，是不存在的。如果我们要调用这些面板功能的话，就需要鼠标点击把它调出来，然后使用，如果把现存窗口选项栏里的勾点掉，那么相对的AE界面的面板也会去除。所勾选的窗口是可以浮动调整的，不需要浮动的话，我们也可以把窗口放回去。
2.顶部工具栏面板
顶部工具栏面板具体功能如上图；做UI动效常用的工具有：选取工具、手型工具、缩放工具、旋转工具、锚点工具、矩形工具、钢笔工具、文本工具等；做MG动画会较多用到图钉工具；
3.项目面板
项目面板，主要是导入一些素材，以及合成的渲染输出，都是在这个项目面板里进行的。素材的格式包括：Mp3的音频、AI文件、psd文件、图片、Mp4、WMV等视频格式。导入素材可以在文件选项栏点击导入。也可以直接在项目面板双击来导入素材。
PSD/AI文件导入到AE中的步骤：
双击项目面板或导入素材，选择想要导入的PSD源文件；
导入弹窗选择项：启用-选择所有可接受的文件或所有素材文件；导入为-选择合成保持图层大小；如下图：
点击打开，这样就完成了能显示图层的PSD源文件导入。步骤如下：
注：在PSD源文件中，一定要养成良好的命名习惯，尽可能把图层整理清晰后再保存，方便在AE中寻找图层；
在Illustrator中需要将设计中的每个元素放置到独立的图层中，然后保存文件；不然导入就是一个图层；
将Sketch文件导入到AE中的步骤：
Sketch毫无疑问是如今UI设计行业使用频率最高的软件之一，其凭借轻量、高效的使用特点和拥有着专门的Toolbox插件体系的优势获得大家的认可。同时Sketch Toolbox中有不止百款插件供设计师们免费使用。不过Sketch并不是Adobe家族中的一员，所以从协同上来说，没有PS和AI便捷，但是借助一个插件“Sketch2AE”就可以促使Sketch导入到AE中。
- 首先在Sketch中将所有需要运动的图层打组，然后在组命名前加上“#”，意味着该组属于一个图层不可编辑；
- 然后选中所有需要导出的组，在插件中找到“Sketch2AE”，然后执行生成导出切片命令，此时可以看到每个组下方都会出现一个名为“Slice To AE”的新图层；
- 然后再找到插件中的“Sketch2AE”，执行“导出画板命令”，然后在弹出的面板里设置合成时长和帧速率，并选择需要导出的画板，点击确定，同时给文件命名，然后选择导出的存放路径导出文件，此时在对应的路径下会自动生成一个.jsx的脚本文件和slice文件夹。
- 打开AE后，在菜单栏选择文件-脚本-运行脚本文件，选择刚才导出的.jsx文件，这就算导入成功了。
4.视图窗口
视图窗口（合成窗口）是视频的预览区域，能够直接的观察要处理的素材文件显示效果。该窗口不仅可以预览素材，在编辑素材的过程中也是不克或缺的。
下图是视图窗口各个功能点的解释：
如果在动画设计中，视图窗口出现如上的红色提示条，不要惊慌～我们只需要按键盘上的“caps lock”就可以取消红色提示条了～
5.素材图层编辑区
图层编辑区域主要功能详细介绍如下：
6.时间轴面板
时间轴窗口素材截取，全选全截，单选单截。调整左出点：alt+[ 调整右出点：alt+]左右中括号是控制关键帧的出点和入点。
7.预览面板和效果面板
预览面板主要包括播放、逐帧播放、倒放、以及声音开关、调整帧速率等设置；
效果面板主要和一些“效果和预设”，所有的效果都收集在这里，我们可以选择或者搜索找到想要的效果并应用；
After Effects CC工作流程
启动一个项目包含两项任务：（1）基于最终输出格式设计项目（2）创建项目文件
项目素材
- 文件路径：每次做项目之间，先建好文件夹，在文件夹内再建一个素材文件夹，用来存放图片、psd、ai或其他视频文件，避免再次打开源文件时，读取不到素材路径而画面缺失；
- 正确的命名习惯：尽可能用窗口兼容文件扩展名来命名素材和项目文件，例如，Quick Time电影的.mov和After Effects项目的.aep；
- 相同资源：确保所有资源在两个体系均可用，比如相同的字体、效果、编码器等；如果将一个项目渲染成一个或多个媒体格式，通常将合成的解析度设置和在输出中使用的最高解析度设置进行匹配，然后设置渲染队列窗口，来为项目的每一种格式渲染一个单独的版本。渲染输出时，经常输出的格式有：Quick Time、Microsoft Video For Windows、GIF、.swf格式等；
偏好设置
在开始一个合成之前，需要根据具体工作情况进行项目设置、渲染设置、输出模块设置以及偏好参数设置。
- 视频渲染和效果：可设置使用范围；
- 时间显示样式：包括时基、帧数和胶片长度3种方式；
- 颜色设置：包括颜色深度和工作区颜色；
- 音频设置：为统一输出模式，同时节省时间，不必每一次渲染输出时都进行设置，可以根据成品需要设置渲染和输出的参数；
组织和管理素材
在我们导入素材时，AE不是将素材复制到项目中，而是在项目控制板中创建一个对应素材项目的路径链接，这就是为什么刚开始我们需要在项目文件中创建好素材文件的原因。如果中途文件丢失，就会用彩色占位符展示，此时我们可以双击彩色占位符，重新载入项目项目素材即可。
如果我们使用其他程序修改项目素材时，比如用AI或者PS修改文件样式保存后，再次打开项目时，AE中的素材样式也随之改动。
输出设置
当项目各种动效技巧完成时，接下来就是输出成品，为了加速渲染速度，可以先清理内存，执行 主菜单-编辑-清理-清理所有内存的命令；
- 首先要激活输出的时间线窗口，选择 主菜单-合成-添加到渲染队列的命令，自动添加至渲染队列；
- 在渲染队列面板中单击渲染设置对应的选项，在弹出的渲染设置对话框中设置渲染文件的品质、分辨率、以及时间采样等选项，然后单击确定按钮关闭对话框；
- 在渲染队列面板中输出模式对应的选项，在弹出“输出模块设置”对话框中设置渲染文件的格式、视频输出、尺寸等选项，然后单击确定按钮关闭对话框；
- 在渲染队列面板中，单击“输出到”对应的选项，在弹出“将影片输出到”对话框中设置渲染文件的名称和路径，单击确定按钮关闭弹窗；
- 当设置完成后，就可以单击渲染按钮开始渲染，直至完成
- 高版本的AE CC 目前已经无法直接输出动态GIF文件了，我们需要借助Adobe Media Encoder ，在合成窗口中选择添加到Adobe Media Encoder 队列输出GIF；
