AE动效教程 | 点击动效&刷新动效

制作工具：AI（Illustrator）、AE

效果适用场景：App、小程序、网页等一些其他的场景

这期的插件可以使UI做的AE动画直接导出Josn文件供开发使用（自写的插件安装教程，你们可以下载安装试试看哦）！超级便利！

如果有没有看懂的，大家可以留言，我再给大家解答

给大家的话：设计是个需要耐心的客人，要好好的服侍！

老规矩：先上动效图，（手指人的动图导出的GIF有红色的边，，有点奇怪）

今天就来个手指人的刷新动效！金币点击的动效，你们可以自己尝试一下，我会把源文件放在里面；开整：

1. 先新建画布（画布随意），在AI里面把所需的元素画好。眼睛可以用路径描边或者布尔运算来实现，其他的就是一些圆角矩形和圆形堆叠而成的，没什么难度！

2.接下来就是把AI文件导入AE里面；这里要注意、注意、再注意，这几步的操作超级重要

·打开AI文件的图层界面，打击可以看到所有图层全部置于在一个层里面的，现在执行“释放到图层顺序”，然后每个图层前面的颜色都是五颜六色的了，那就成功了

·释放完毕啊之后把里面的所有图层拖到顶层，然后把每个图层命名一下，不然等会放到AE里面你都找不到

现在打开AE

·新建500*500的画布，时间调整为两秒（00：02：00）；要是新建成功后，想再次更改画布的属性以及时间，可用Ctrl+K即再次调整

.右击项目栏中的素材一栏的空白处，导入单个文件或者点击顶部的文件按钮——导入文件即可；

·导入文件的时候选择导入为——合成-保持图层大小（这一步很重要，不然导进去就是一个图层文件）

3.现在我们已经成功的把AI文件导入AE了，大家可以先观察一下手指人的动效，眼睛、嘴巴以及头部都在动，那我们是不是可以分别建三个合成把着三部分的动效分别做完，最后再放到一个合成里面呢？答案是可以的！！！

·那我们先来做眼睛的合成，新建一个200*200的合成；下面就是把张开的眼睛文件和闭合眼睛的文件拖入到眼睛合成里面，右击把矢量文件创建-从矢量图层创建形状，变为形状之后就可以做一些复杂的动画，拖拽路径产生的一些动画（这一步如果不做的话，当你更改AI文件的时候这里面的东西是会跟着变化的）

先理一理眼睛的动画逻辑，睁眼——闭眼——睁眼——闭眼——睁眼——笑；

现在我们动手来做一下：眼睛有个闭合的效果（时常三帧），可以先把眼睛进行缩放处理，第一帧100%，第三帧70%，感觉像是闭眼

下一个就是闭眼的图层（时常三帧），新建一个形状图层画一个圆角矩形，不做任何处理

上面两个就是睁眼闭眼，再选中两个图层执行CTRL+d进行复制，再衔接时间节点，最后再把眨眼的图层衔接上就好了；大家注意观察下面的时间轴和上方的图形变化；就像下面一样

4，下面我们再来处理一下嘴巴，舔舌头的效果，一样的，新建一个200*200的合成画布，把嘴巴和舌头放到里面，分别创建形状；

我们再想想舌头的动画逻辑：伸舌头——舔嘴唇——收回去

那我们来动手做一下，先给舌头加个蒙版（小心舌头出戏），然后就是处理舌头的位置和旋转的角度，舌头的移动中心点调到嘴的中心（想想自己的舌头，我可是舔了好久的舌头）

5.舌头处理好了，那我们回到总的合成里面，，分别把舌头的合成和眼睛合成放到里面，ctrl+d复制一个眼睛合成旋转180°就是一对眼睛了，接下来就是处理头部；

我们来理一下头部的动画逻辑：头伸出——变大（“膨”出气泡）——缩小——伸长——再还原；

我们对这个形状的路劲进行处理，如下：打了五个关键帧

6.最后就是气泡了，这个超级简单，我们只需做好一个动画复制再更改颜色即可

具体步骤：第一列帧（位置）——第二列帧（位置变化、缩放、不透明度）——第三列（位置变化、进行缩小、不透明度变为0）

最后复制多个形状图层，更改位置、颜色以及大小，再把时间轴错开即可，效果如下：

总结：

1. AI做完矢量图的时候注意要把每个图层分开（操作步骤：执行“释放到图层顺序”，释放完毕啊之后把里面的所有图层拖到顶层，然后把每个图层命名一下）

2. 到如AE的时候要选择保持图层大小，不然导进去就只有一张图

3. 做动画的时候先分析每个动作，能分开分开做成不同的合成，最后再放到整个合成里

4. 做动画要考虑到动画的韵律，感觉过渡生硬的时候可以多多参考别人的作品再来

5. 心态，心态，心态很重要，不要半途而废，加油！

最后就是插件的运用了

到Bodymovin的GitHub首页(链接: bodymovin/bodymovin )克隆项目到本地,或者下载.zip包。

觉得不错就点个赞把！