想要做一个logo的描边动画用于加载中状态。这种一般都是图标比较灰、不是很显眼。我经常用到的效果都是光泽变化的效果,就是有一层白色渐变在logo内移动。但是总感觉用的有点多。这次做一个简单的描边的效果吧。

效果预览

效果

矢量的logo图

我们要拿到一个矢量的logo图,这样才能更好的生成准确的路径。特别是logo这种千万不要自己用钢笔手画。毕竟偏差一点都是错误的。

这里矢量图是需要illustrator来绘制。

绘制图标

导入到AE中

我们打开AE。新建一个合成,输入完需要的尺寸。帧速率指的是每秒的帧数,一般20、25都行,越大最后文件体积越大。可以预估一下动画的时间。

新建合成

将之前绘制好的logo都拖拽到AE中。

拖拽到这个位置

选择图层,图层大小。(如果有多个图层可以逐层导入

导入素材

现在我们就看到了一个完整的素材了。

导入素材

创建路径

现在这个素材还是ai的文件,我们需要将它变成我们可以在AE中编辑的形状文件。

从矢量图层创建形状

我们生成形状之后,我们可以看到生成了三个路径组,对应了三个字母。

形状内容

创建描边

我们现在应该把填充更改为描边,这意味着字母里面的填充颜色将被删除,创建一个描边。

我们展开组,删掉每个组填充。

删除这个填充

内容添加

更改属性

修剪路径

添加修剪路径

修剪路径

我们控制修剪路径的开始和结束的数值可以产生描边动画效果。打点之后编辑各个不同位置的效果即可。也可以使用偏移让描边在路径上流转。

导出

文件导出添加到渲染队列

导出

大功告成

成功制作一个描边效果的logo动画!

效果