想要做一个logo的描边动画用于加载中状态。这种一般都是图标比较灰、不是很显眼。我经常用到的效果都是光泽变化的效果,就是有一层白色渐变在logo内移动。但是总感觉用的有点多。这次做一个简单的描边的效果吧。
效果预览
矢量的logo图
我们要拿到一个矢量的logo图,这样才能更好的生成准确的路径。特别是logo这种千万不要自己用钢笔手画。毕竟偏差一点都是错误的。
这里矢量图是需要illustrator来绘制。
导入到AE中
我们打开AE。新建一个合成,输入完需要的尺寸。帧速率指的是每秒的帧数,一般20、25都行,越大最后文件体积越大。可以预估一下动画的时间。
将之前绘制好的logo都拖拽到AE中。
选择图层,图层大小。(如果有多个图层可以逐层导入
现在我们就看到了一个完整的素材了。
创建路径
现在这个素材还是ai的文件,我们需要将它变成我们可以在AE中编辑的形状文件。
我们生成形状之后,我们可以看到生成了三个路径组,对应了三个字母。
创建描边
我们现在应该把填充更改为描边,这意味着字母里面的填充颜色将被删除,创建一个描边。
我们展开组,删掉每个组填充。
内容添加
修剪路径
添加修剪路径
我们控制修剪路径的开始和结束的数值可以产生描边动画效果。打点之后编辑各个不同位置的效果即可。也可以使用偏移让描边在路径上流转。
导出
文件导出添加到渲染队列
大功告成
成功制作一个描边效果的logo动画!