【重制版】于小丘Blog同款动态Logo制作教程

之前我在子比主题官网发了一篇动态Logo的制作教程，得到了将近2000人次的阅读。这篇文章和那片文章的主题一样，是教会大家如何制作这样一个会动的Logo，这篇重制版会相对简单一些，我也将以更大的耐心来对待这篇文章。如果你觉得不错的话，能麻烦点一个小小的赞吗~

需要准备的软件有Ai、VSCode以及SVG插件，这些软件在官网和插件商店都能下载到，这里我就不赘述了。然后我们打开Ai，创建一个文件。我个人推荐使用通用的那个1366*768那个：

我们先临摹一个字体。我个人习惯基于免费商用的思源黑体来临摹，字重推荐选择Heavy，字体大小建议144px。

然后在屏幕中间放置一个文本框

然后把你需要改成的内容改一下就好了。然后我们点击屏幕左侧的曲率工具，然后就可以开始临摹了。这里的操作方法不像是画笔一样要自己画路径，而是点击起始位置和终止位置就可以了。如果你想要改变路径，可以直接拖动画好的点就行了。我个人是喜欢可爱一些的东西，所以我没有严格照着原版字体来画，而是改了一些地方，最终效果如下：

然后点击左上角的文件-导出-导出为，保存类型选择SVG，然后在SVG选项里把字体一项改成转换为轮廓，然后点击确定。

把刚才导出的SVG用VSCode打开：

可以看到它自动压缩为一行了。现在全选，然后按下Shift+alt+F，VSCode会对这段SVG进行格式化：

然后你可以对这段代码进行小修小改（因为Ai会加上一些没用的path，比如上面那张图第23行和第25行没用，因为它们都只有一个M定位，可以删掉。Style也可以自己进行一些小修小改，最终如下：

动态内容的实现都是由CSS完成，很多人都想要那个笔画，所以这里我分享两段代码：

这一段代码可以实现笔画的内容：

.yuxiaoqiu path {
                stroke-dasharray: var(--len);
                stroke-dashoffset: var(--len);
                animation: stroke-animation .3s ease-in-out forwards;
                animation-delay: var(--wait)
            }

@keyframes stroke-animation {
                to {
                    stroke-dashoffset: 0
                }
            }

这一段用来实现渐变：

.yuxiaoqiu path {
                animation: fade-animation .2s ease-in-out forwards;
                animation-delay: var(--wait)
            }

@keyframes fade-animation {
                0%{
                    opacity: 0;
                }
                to{
                    opacity:1;
                }
            }

怎么用呢？我们拿笔画那段代码来举例，先把这段代码丢进defs的style里，然后仔细看上面那张图的path，它后面的class都有一段内容。什么意思呢？a是Ai自动添加的我们不用理它，yu-1 yu-2 yu-3 xiao-1 …… qiu-4这些是我自己加上去的，style对于这些得加上一些参数，比如延迟，每一笔的长度等等。加完以后，我们还要再加一个小手脚：把所有的path包在一个g里面。简单来说，在第一个path之前加一个<g class="yuxiaoqiu">(其中class要等于你上面path前面的名字)，在最后一个path结束以后加一个</g>，类似这样：

加完以后就可以爽快地去搓CSS了。对于上面那个样式可以传递两个参数，一是当前笔画的长度，二是这段笔画需要等待多久之后再播放。比如：

.yu-2 {
    --len: 131;
    --wait: .2s
}

其中的--len参数就是当前笔画的长度，--wait就是当这个SVG打开后等待多久之后再播放。其中--len要仔细调整，如果过小了会出现断开（类似于本站Blog的那个o一样），太大了会导致动画播放过快。--wait推荐每过0.2s再播放下一笔，小数点前如果为0可以省略(10这种不行哈一定得是0才行)，然后每一笔都加一个，最终变成这样：

最终结果如下：

你可以选择把style压缩后再去xml压缩，这下不影响图片的播放，也能微乎其微地缩小一下图片体积。带上动画的这个Logo文件大小不到4KB。

下面是一些参考：