利用纯SVG+CSS keyframes animation动画实现手写毛笔字(书法)效果 – 畅想资源 | 您所在的位置:网站首页 › 铅笔字效果 › 利用纯SVG+CSS keyframes animation动画实现手写毛笔字(书法)效果 – 畅想资源 |
相信大家在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文件。 提示:本文中为方便期间将只使用一个字(“非”)来进行教程,实际操作中可以同样方法使用更多字来制成整个动画(参见上方预览动画的原始码)。 本文所用的原始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步。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 .st0{fill:#CC3300;}三、加入笔序路径 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行) 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667685、然后我们需要依次找出每个笔序的 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. 使用方法: 可以用类似以下的方法记录结果: 1234567 .line-fei-1:75.line-fei-2:40.line-fei-3:124.line-fei-4:101.line-fei-5:25.line-fei-6:35.line-fei-7:366、再接着我们便开始加入CSS keyframes动画了。 首先,创建一个 .pen 的class,其中 stroke 可修改为你想要的颜色,而 stroke-width 之后可能会需要进行微调(见第“五-2”步),animation-duration 则决定了你整个动画将要进行的时间,其它animation- 开头的选项也可进行修改(详细见相关文档)。 123456789101112 .pen { fill: none; stroke: black; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dashoffset: 0; animation-duration: 4s; animation-iteration-count: 1; animation-timing-function: ease;}7、加入每一笔序相应的class。clip-path 里是你SVG defs 中那一笔画的ID,stroke-dasharray 是你刚刚第5步为这一笔序中测试并记录下来的数字。animation-name 是之后步骤中将会加入的你这一笔序动画的名称。 12345678910111213141516171819202122 .line-fei-1 { clip-path: url(#fei-1); stroke-dasharray: 75; animation-name: draw-fei-1;} .line-fei-2 { clip-path: url(#fei-2); stroke-dasharray: 40; animation-name: draw-fei-2;} // ...以此类推... .line-fei-7 { clip-path: url(#fei-7); stroke-dasharray: 36; animation-name: draw-fei-7;}8. 将所有笔序都加入完成后,便可开始加入CSS keyframes。0%时那个 stroke-dashoffset 和你上方该笔序的 stroke-dasharray 是同一个值,每个动画中上方的百分比代表开始时时间(即你第6步中设置的 animation-duration)的百分比,下方的百分比代表结束时时间的百分比。 123456789101112131415161718192021222324252627282930 @keyframes draw-fei-1 { 0% { stroke-dashoffset: 75; } 10% { stroke-dashoffset: 0; }}@keyframes draw-fei-2 { 0%, 10% { stroke-dashoffset: 40; } 20% { stroke-dashoffset: 0; }} // ...以此类推... @keyframes draw-fei-7 { 0%, 90% { stroke-dashoffset: 36; } 100% { stroke-dashoffset: 0; }}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: 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 .line-fei-1 { clip-path: url("#fei-1"); stroke-dasharray: 73; -webkit-animation: draw-fei-1 5s ease; -moz-animation: draw-fei-1 5s ease; -ms-animation: draw-fei-1 5s ease; animation: draw-fei-1 5s ease;}@-webkit-keyframes draw-fei-1 { 0%, 60% { stroke-dashoffset: 73; } 68% { stroke-dashoffset: 0; }}@-moz-keyframes draw-fei-1 { 0%, 60% { stroke-dashoffset: 73; } 68% { stroke-dashoffset: 0; }}@-ms-keyframes draw-fei-1 { 0%, 60% { stroke-dashoffset: 73; } 68% { stroke-dashoffset: 0; }}@-o-keyframes draw-fei-1 { 0%, 60% { stroke-dashoffset: 73; } 68% { stroke-dashoffset: 0; }}@keyframes draw-fei-1 { 0%, 60% { stroke-dashoffset: 73; } 68% { stroke-dashoffset: 0; }}4、但很明显那样加起来会太过复杂了,所以推荐使用less等其它工具来简化代码。以下是“畅想资源”自己用less写出的一个简化版本,可供参考: 12345678910111213141516171819202122232425262728293031323334353637 @animation-duration: 5s;@animation-timing-function: ease; .pen { fill: none; stroke: rgb(199, 182, 160); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-dashoffset: 0;} .do-calligraphy-animation(@name, @strokeDasharray, @startPct, @endPct, @timingFunction: @animation-timing-function) { .p-@{name} { clip-path: url("#@{name}"); stroke-dasharray: @strokeDasharray; .animation(~'draw-@{name}', @animation-duration, @timingFunction); } .keyframes(~'draw-@{name}', { 0%, @{startPct} { stroke-dashoffset: @strokeDasharray; } @{endPct} { stroke-dashoffset: 0; } });} .do-calligraphy-animation(fei-1, 73, 0%, 20%);.do-calligraphy-animation(fei-2, 25, 20%, 25%);.do-calligraphy-animation(fei-3, 127, 25%, 40%, ease-in);.do-calligraphy-animation(fei-4, 106, 40%, 75%);.do-calligraphy-animation(fei-5, 28, 75%, 82.5%);.do-calligraphy-animation(fei-6, 37, 82.5%, 90%);.do-calligraphy-animation(fei-7, 38, 90%, 100%);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条评论) |
CopyRight 2018-2019 实验室设备网 版权所有 |