相信大家在Flash时代见过很多通过Flash动画模拟毛笔书写效果的教程，但在Flash早已停止被支持的今天，“畅想资源”便来教教大家如何通过SVG和CSS动画简单实现动画书写毛笔字效果，让访客在移动设备和不支持Flash的浏览器（即现今绝大多数浏览器 ）中也一样能看到毛笔字书写效果，为你的网站加入中国传统文化色彩。

预览

“畅想资源”个人网站首页：https://www.hesyifei.com/（或点击下方“Run”按钮预览）

See the Pen 利用纯SVG+CSS keyframes animation动画实现手写毛笔字（书法）效果：预览 by Yifei He (@hesyifei) on CodePen.

一、准备毛笔字SVG源文件

1、既然要利用纯SVG+CSS动画实现动画书写毛笔字效果，我们当然首先需要一个以SVG路径（path）形式保存的毛笔字文件。

我们在这里将使用“书法迷”网站上所提供的SVG文件，大家亦可自行于纸上写完毛笔字后扫描，再将每笔的边缘转换为闭合路径并存为SVG文件。

提示：本文中为方便期间将只使用一个字（“非”）来进行教程，实际操作中可以同样方法使用更多字来制成整个动画（参见上方预览动画的原始码）。

二、切分每一笔画

1、接下来我们需要将毛笔中每一笔画单独切分开来。

我们本文中将使用Adobe Illustrator CC做示范，但你也可以使用你熟悉的其它SVG工具达成相同效果。

2、首先我们可以把所有背景删除，再把所有图层都移动到根部，这样可以避免SVG中保有任何 g transform 等标签，使得所有路径都清楚地保存在SVG文件中，让之后的步骤更加顺利。

3、接着我们便可以正式开始切割笔画了，“畅想资源”找到AI中一个比较方便的“美工刀”（Knife），但大家也可能有更快更方便的方法。这里“畅想资源”就不详细介绍如何使用“美工刀”，可自行寻找AI相关教程。

4、对于没有重叠的笔画来说（即字中其它笔画不会碰到这一笔画，比如下图中“非”字的右半部份的笔画），切割十分简单，只需要将两个部分分开来即可。

5、对于有重叠部分的笔画来说（即字中其它笔画会重复覆盖这一笔画，比如下图中的“非”字的左下角那一个笔画），切割时就需要先复制（duplicate）那一图层，然后再想办法把两个重叠的笔画分开切割，从而让各自都能保留一个完整的笔画。

6、切割完成后，将每个图层命名为可以理解的名字，比如“非”的第一笔可以被叫做“fei-1”。

7、用纯文字编辑器打开SVG文件，检查是否整个文件是否只剩下 path 标签，没有 g 等其它标签（style 标签可以保留），如有问题请参见上方第2步。

三、加入笔序路径

1. 在切割完成后，我们还需要让电脑知道他该按照什么路径、什么顺序来播放每一笔笔画。

2. 首先，选取“铅笔工具”（Pencil Tool），记得在顶部把这个path的颜色调为“无”（即透明）。

3. 然后依照毛笔手写时的笔序和方向，分别画出每个笔画的路径，这一路径应在那笔笔画的正中间。

注意：这一路径最好在起点可超出最初有墨的地方，否则最后显示时那一笔的第一点将突然出现而不是渐渐加入。

提示：如果这一笔画属于刚刚“二-5”步中有重叠部分的笔画，也记得将笔画当作单独的两笔来处理。

4. 将新加入的每个图层（即每个路径）命名为可以理解的名字，比如“非”的第一笔笔序可以被叫做“line-fei-1”。

四、制作并调试动画

1、首先，我们可创建一个HTML和一个CSS文件。注意SVG源代码一定要保存在HTML页内（即inline使用），而非作为单独文件储存并使用img加入。

2、我们要将每一个笔序（即上方第三部分做出的以“line-”开头的一堆开放路径）放入一个SVG代码的根中，并给每个路径加入 class="pen line-fei-1" （这里“line-fei-1”是你那一笔序的名称）（代码是下方代码的2至12行）

2、再将每一笔画（即上方第二部分做出的一堆封闭的路径）加入SVG defs 内的每个 clipPath 中。clipPath 的ID便是你笔画的名称（比如“fei-1”）（代码是下方代码的14至67行）

5、然后我们需要依次找出每个笔序的 stroke-dasharray 长度。暂时将每个笔画的相应长度记录下来即可。

在这里“畅想资源”为大家准备了一个工具，只需于下方（先点击右上角的“Edit on CodePen”）将你那个一个笔画的path路径粘贴进去并慢慢修改CSS中的 stroke-dasharray，直到那一笔画刚好显示完（即当 stroke-dasharray 加1时，笔画无变化；当 stroke-dasharray 减1时，笔画长度有减少）。

See the Pen 利用纯SVG+CSS keyframes animation动画实现手写毛笔字（书法）效果：寻找stroke-dasharray by Yifei He (@hesyifei) on CodePen.

使用方法：

可以用类似以下的方法记录结果：

6、再接着我们便开始加入CSS keyframes动画了。

首先，创建一个 .pen 的class，其中 stroke 可修改为你想要的颜色，而 stroke-width 之后可能会需要进行微调（见第“五-2”步），animation-duration 则决定了你整个动画将要进行的时间，其它animation- 开头的选项也可进行修改（详细见相关文档）。

7、加入每一笔序相应的class。clip-path 里是你SVG defs 中那一笔画的ID，stroke-dasharray 是你刚刚第5步为这一笔序中测试并记录下来的数字。animation-name 是之后步骤中将会加入的你这一笔序动画的名称。

8. 将所有笔序都加入完成后，便可开始加入CSS keyframes。0%时那个 stroke-dashoffset 和你上方该笔序的 stroke-dasharray 是同一个值，每个动画中上方的百分比代表开始时时间（即你第6步中设置的 animation-duration）的百分比，下方的百分比代表结束时时间的百分比。

9、现在尝试访问你的网页，应该整体动画流程都已成形，接下来便可开始微调和优化部分。

See the Pen 利用纯SVG+CSS keyframes animation动画实现手写毛笔字（书法）效果：“非”字初步预览 by Yifei He (@hesyifei) on CodePen.

五、微调与优化

1、首先，尝试不同的keyframes时间百分比以找到你觉得最好的每个笔画的书写时间。

2、其次，打开浏览器的开发者工具，尝试定位并修改 .pen class中 stroke-width 值，看看会不会因为这个值调大了而显示了更完整的笔画。如果是可尝试于CSS中进行修改并查看效果。

3、可尝试于每个笔序class中（比如 .line-fei-1）加入一个 !important 的 animation-timing-function 来修改动画的细节速度，比如可调整为 ease-in、ease-out、linear等等。详细请参见：CSS animation-timing-function Property

4、加入各个浏览器的prefix，比如一个笔画的动画可能需要加入以下浏览器prefix：

4、但很明显那样加起来会太过复杂了，所以推荐使用less等其它工具来简化代码。以下是“畅想资源”自己用less写出的一个简化版本，可供参考：

5、欢迎提供更多意见...

参考资料

Sign on the Dotted Line: Animating Your Own SVG Signature

How to animate handwriting text on the web page using SVG?（特别感谢这一回答，它是网上很少几个解答了如何在动画中显示路径上的clipPath而非路径本身的问题，才让我们可以实现动画中最重要的一部分）

文中GIF教程动画使用LICEcap制作，并参考“Optimizing Animated GIFs by Converting to HTML5 Video”转换为HTML5 MP4视频。

本文的英文版本已发表于本站的英文博客上。

历史上的今天

2013年：給WordPress添加評論表情包（38条评论）

Facebook分享

Twitter分享