UI动效是目前最火的技能包之一，这是大家公认的，半仙哥也无需再列一些论据去赘述，今天我们学习UI动效里非常实用且容易效果的一类—图标动效
UI动效是目前最火的技能包之一，这是大家公认的，半仙哥也无需再列一些论据去赘述，今天我们学习UI动效里非常实用且容易出效果的一类—图标动效，如下图就是一些非常炫酷的图标动效：
怎么样，是不是似曾相识，是不是看到很多大神有打造这样的作品集，唬的一些设计萌新们一愣一愣的，以为是什么黑科技，继而萌发出花痴班的赞美！
哇，大神，你好猛哦！
然鹅，当你看完半仙哥今天的教程以后，你会一拍大腿，原来这么简单，我TM听完课也可撸一发。
接下来还是跟以往的教程一样，视频教程已非常详尽，为了大家在学图标动效的过程中程式感更强，我把一些重要的步骤简单做个图文教程。
Step1 在AI中绘制图标，由于AI的图层不像PS严格，所以在绘制完以后，一定要把每一个曲线放置于不同的图层中，案例效果和图层样式如下：
这里半仙哥分享一发小技巧，Ctrl+X剪切以后，Shift+Ctrl+V可原地复制，在本例中用的非常多。
Step2 打开AE，选择导入刚绘制的AI文件，弹窗中“导入种类”选择“合成”，如下图所示：
我们可看到合成与时间轴如下图所示：
我们可简单设置一下合成的背景颜色为白色，以及调整一下图标在合成中的位置，最终效果如下：
Step3 接下来这一步非常之关键，直接决定了我们能否打造出图标动效来，选中图标所有的图层，右键选择“从矢量图层创建形状”，并删除原有的AI的图层，最终如下：
Step4 将“太阳”图层、及“咖啡”的“热气”图层适当设置一下线条的粗细、颜色等，效果如下：
Step5 选择“云朵”层，然后添加“修剪路径”，对其“开始”设置关键帧，初始帧“开始”为100%，末尾帧“开始”为0%，如下所示：
并可打造实际情况添加缓动，让动效更加自然一些，并点开“组1”，对“云朵”的描边由默认的“平头端点”换成“圆头端点”，效果如下：
Step6 接下来的动作就是重复劳动，把相应的形状图层添加修剪路径，适当调整快慢与缓动，即可完成本例的制作。
是不是特别简单，但是呢又非常实用，总结一点就是：先在AI中绘制好各个类型的图标，并将图标的每一个组成部分放置于不同的图层中，然后倒入到AE中，对图标的每一个组成添加修剪路径，分别调整节奏，即可大功告成也！
关注公众号：趣设网课，回复“图标动效”即可获取演示工程文件！
作者：趣设网课（v: uegreat）
本文由 @趣设网课 整理发布。未经许可，禁止转载。
Powered by Froala Editor