之前在 想让别人认可你的 Idea 吗？ 一文中提到以后要写关于 After Effect 的文章。今天来挖坟了，本文分享一下如何用 AE 配合 AI & PS 进行简单的 gif 动效制作，欢迎讨论。
Step 1
打开 AI, 文档类型选择 Video and File, AI 画布会自动帮助创建文字安全线，便于后期导入 AE 中。
Step 2
- 新图层，图形工具画圆1，描边，填充 border: 6px; color: #fff;
- 新图层，复制圆1，缩小，改 border:2px;
- 新图层，钢笔工具描绘左侧弯形直线，填充 color: #fff，复制，旋转，剪切到另一个新图层生成右侧弯形曲线。
- 新图层，直线工具生成中间横线，color: #fff; border: 2px;
- 新图层，输入 SURF, 调整字体设置，使其大小适中
- 新图层，复制 SURF，内容改成 ZONG
需要注意的是，每一个需要运动的元素都需要创建在单独的图层上。因为 AE 支持直接导入 AI 文件，同时会将 AI 每一个图层对应生成
Step 3
打开 AE, 将 AI 导入[import as component]，生成新的 Component.
双击 Component, 即可看到每个图层，下面可以开始正式制作动画了。
Step 4
根据自己想要的动画效果，创建关键帧，并设置对应属性。每一个单独的图层好比一个跳跃的小动物，黑色画布好比美丽的草原。而你就好比大自然的神，让每个小动物在特定的时刻以某种方式出现在大自然的某个地方。
主要动效过程：
- 大圆先从 scale: 5% 到 scale: 100%;
- 0.2s 后，小圆再从 scale: 5% 到 scale: 100%;
- 1.5s，左右竖线渐变出现，opacity: 0% - 100%
- 1.3s，当竖线快完全出现时，渐变中间的横线，opacity: 0% - 100%
- 1.5s - 2.5s, 改变左右竖线的 position, 同时改变中间横线的 scale, 形成拉伸开来的效果
- 2.5s - 3.5s, 利用 Alpha matte 功能制作文字上浮功能
- 3.5s - 6s，利用 Null object 群组所有元素，设置旋转效果
效果基本完成啦。
Step 5
但动画效果都是线性的，看起来没有什么动感。这时候需要点击 Graph Editor 按钮，去调节动画曲线。但让也可以快捷设置 Ease in || Ease out || Ease Ease, 按照你想象中的方式设置它。曲线越缓，动效渐变越快，反之亦然，多设置几次就会找到你喜欢的模式。
Step 6
渲染导出，导出格式选择如下。
点击 Output Module，将导出 Format 设置为 PNG Sequence. 这样 AE 便会将所有图片帧按 Sequence 保存到指定地址。
Step 7
打开PS, Open 保存图片的文件夹，选择第一张图片，导入时记得勾选 Image Sequence checkbox.
Step 8
存储为 WEB，格式选择为 gif 即可。
大功告成，用浏览器打开 gif 便可以欣赏自己的作品了。
How? The shortest answer is doing. -
