图标动效怎么做
最近做了几个小图标动效，和大家分享一下制作过程，做起来挺好玩的，最大的乐趣就在于研究出每一种你想要的效果，成就感满满。
所需工具：AI、AE
图片大小：800*600px
图标动效时间：00:00:00:16
以这个图标动效为示例，和大家分享一下这个图标动效是怎么做的。
做图标动效很简单，只需要以下三步，再加亿点点细节
只需亿点点...
这一步最重要的就是分好图层，给到AE就可以直接使用，毕竟AI、PS画图还是比AE好用的。
做简单的图标不需要分组（做设计的时候注意要对图层进行命名，这里我忘了命名了）
将大编组进行图层释放。
将释放图层后的小编组进行拖出。
删除原来的大编组，此时他已经没有东西，所以就不是一个编组了，也可框选左边的图像，检查右边有哪个图层是不亮的，直接删除即可，删除后进行文件保存。
将AI做好的图导入AE，直接就可使用，AE最主要就是对图标进行动效的设计，但也会有需要再在AE里添加简单的图像做蒙版呀、模糊呀都很好用。
双击出现弹窗，选择所有可接受的文件，导入为素材，点击打开。
就会出现另一个小弹窗，选择合成-图层大小-确定
双击左上角的图像文件，左下角就会出现已分好的图层和中间会出现和ai一样的图像，导入默认是黑色背景。
对左下角的图层进行命名，方便图层查找。
制作模糊效果
因为我做的蓝色顶层是带有一点点的模糊效果，所以我就复制了一个蓝色顶层，将蓝色顶层2放在下方。选择右侧的效果输入快速方框模糊进行搜索，将效果拖到左下角的蓝色顶层2里，右侧会有属性，修改模糊半径为4，点击左下角蓝色顶层2的三个矩形中间，模糊效果就做好了。
复制蓝色图层，将复制的图层拖动到原图层下方。
在右上角选择效果和预设，搜索快速方框模糊，将效果拖动到蓝色图层2（直接拖入中间图像中的话，会选择蓝色顶层），左上角会出现属性，将模糊半径设置为4px；点击左下角蓝色顶层2的三个矩形中间，模糊效果就做好了。
制作蒙版
在黄色图层和蓝色图层之间，为做了一个深蓝色图层，看起来图层叠加的颜色就好看一些，但在图层在做动效的适合，被遮住的图层就容易暴露出来，所以要做一个这个图层的蒙板。
点击被遮部分这个图层，然后选择一个圆角矩形，画一个和黄色底层一样大的图形，就能看到被遮部分已经画好了，注意调节一下圆角。
连接父子级
将你像要联动的图层进行父子级的连接，这样只需要修改一个图层的动效，其他图层也会跟着动。
我这里是将杠一、杠二、标签、蓝色顶层、被遮部分都连接到蓝色顶层2中。可直接在右侧框选择蓝色顶层二，也可拖动螺纹连接到蓝色顶层2。
动效制作
现在先做蓝色顶层二的动效，我是打算做一个小图标的hover动效，所以打算做一个16帧的动图，前8帧动，后8帧不动。为什么要做不动的呢？因为要给图标移出时的反应时间。
大体动效制作
修改时长，将蓝色顶层2里面的内容展开，在位置打上关键帧（这时要注意你的时间帧的线在哪）。
再把帧线移到第8帧，将蓝色顶层2向左移动70px（按住shift，同时按7下方向的左键，这是为了确保蓝色顶层和换色底层移动的位置一样），你会发现除了黄色底层的其他图层都一起移动了。黄色底层也使用同样的方法向右移动70px。
现在还要调整被遮部分的大小，因为它之前都是跟着蓝色顶层2一起移动的，大小没有变换，咱们要设置到随着时间帧的变化而变小。
选择被遮部分图层，展开蒙版，第0帧的时候在蒙版路径打上关键帧；再移动到第8帧，选择蒙版路径，向右移动140px，现在一个大体的图标动效就做好了
细节动效
大体做好后，感觉还是比较粗糙的，再给动效来一点点细节。
选择标签，在第0帧给位置打上关键帧，移到第8帧，位置向左移动70px。
选择杠二，在第0帧给位置打上关键帧，移到第8帧，位置杠一右对齐。
这时咱们的一个简单动效图标就做好啦，可以按空格键随时对图标进行一个动效预览。
导出png序列帧
最终需要导出16帧的PNG图片给到研发同学落地。
首先选择文件-导出-添加到渲染队列
点击最佳设置，注意导出帧速率为25，持续时间为16帧。
点击无损，格式设置为“PNG”序列，通道设置为RGB+Alpha。
点击输出到，选择自己想保持的位置。
点击右上角渲染，就可以得到你想要的透明背景图片了。
也可选择不设置任何东西，这时导出的就是mov模式的视频了。
先设置好AI的画板大小，因为我做的图比较大，800*600px，一共16张图，所以画板就设置为800*9600px。
图片按照序列一张一张排布好，最后导出一张png图片给到研发同学就可以啦，是不是很简单勒。
白色背景可能会看不出模糊效果，放到深色背景就可以看出是带模糊的，我在导出来的时候也是觉得奇奇怪怪，后来才明白，是需要在深色背景才可以看出模糊效果。
快来一起做一个，给到研发同学，看他向你投来爱（choushi）的目光吧。
