网站最后更新日期:2022年3月25日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站(中) 个人网站(EN) 更多联络方式
×

利用纯SVG+CSS keyframes animation动画实现手写毛笔字(书法)效果

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

预览

“畅想资源”个人网站首页: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文件。

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

本文所用的原始SVG文件:(下载自书法迷;书法家:黎简)

二、切分每一笔画

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

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

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

(注意现在右下角只有两个图层了)

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

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

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

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

(注意现在右下角的图层;图层倒序排后在SVG源文件中笔画便能正序排,方便我们进行下一步)

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)加入一个 !importantanimation-timing-function 来修改动画的细节速度,比如可调整为 ease-inease-outlinear等等。详细请参见:CSS animation-timing-function Property

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

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

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

参考资料

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条评论)

觉得这篇文章有用吗?分享一下让更多人受益吧!

© 版权声明:本文章采用“姓名标示-非商业性-相同方式分享 4.0 国际(CC BY-NC-SA 4.0)”于“”发布,转载时须以相同方式发布并注明“原文链接”!

本文固定链接:https://www.arefly.com/svg-and-css-keyframes-calligraphy-animation/

本文章由“超级efly”于2018年06月29日发表于“网络”分类

你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站

转载请注明:利用纯SVG+CSS keyframes animation动画实现手写毛笔字(书法)效果 | 畅想资源

关键字:, , , , ,

如果您对本文有任何疑问或建议,欢迎发送邮件至yifei@hesyifei.com(或通过其它途径)联系我们,谢谢!