SVG之旅:SVG线条动画实现原理

对于SVG路径动画,我相信大家都看到过这样的动效:一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱,他在自己的博客写了 一篇非常好的文章 来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上 讨论过这种技术 。Polygon使用它在一篇设计方面的文章里创建出了 非常神奇的效果 。Codrops也有很多 非常酷的案例

在这篇文章中,我并没有什么要补充的,只是想把这种技术阐述的更简易些。所以,在这里我用我的方式把这种技术再次向大家阐述一遍。

你有一个SVG图形

首先你有一个SVG图形,如下图所示:

事实上这就是一个路径图形(SVG的路径图)。咱们可以使用 任何制作矢量图的软件 绘制这样的图形,比如前端人员常用的:

除些之外,还可以使用在线的绘制矢量图的Web运用,比如 inker 。我个人比较喜欢使用Sketch软件。如比我们可以在Sketch上制作一个类似于上图的路径图:

这个图形必须要一个 stroke 属性

上面的图导出来的 path.svg 使用编辑器打开,然后清理一下无用的代码,看到的就像下面这样:

    

这个路径 path 必须要有一个 stroke 属性。通过上一节的学习,我们知道 stroke 属性用来设置路径的描边颜色,而 stroke-width 是设置路径描边的粗细。上面的代码放到Web中,看到的效果如下:

线条可以是虚线

线条(路径)可以使用Sketch制作图软件制作,也可以直接来编码,只不过编辑会比较痛苦,比如上面的代码,那么多的数字和字母的配合,我想你和我一会,感觉要疯了。不过你了解了 path 相关的知识,那绘制一条像上图的路径(图形)还是可能的。但这里不阐述这方面的,如果感兴趣,可以阅读 SVG中 path 相关的知识

在SVG中,可以通过 stroke-dasharray 来设置路径为虚线,除了在使用这个属性之外,还可以使用CSS来设置,让它变成一个虚线的形式。

.path {
    stroke-dasharray: 20
}

效果如下:

这个示例让虚线里的每个小线段长度为 20px

可以让虚线小段长度变得更长

我们只需要把 stroke-dasharray 的值设的更大,那么虚线里的每段就会变得更长,比如把上例的 20px 换成 100px

.path {
    stroke-dasharray: 100;
}

你将看到的效果将是这样:

使用 stroke-dashoffset 设置线条的偏移量

在SVG中,可在以 path 元素中设置 stroke-dashoffset 的值,来控制SVG路径虚线的间的偏移量,这样会导致虚线里的小线段的位置发生移动。当然,也可以在CSS中设置:

.path {
    stroke-dashoffset: 1000;
}

我们在浏览器的代码检查器中,不断的修改 stroke-dashoffset 的值,你将看到的效果如下图:

当然,配合CSS的 animation 我们就可以看到一个简单的线条动画。

.path {
    stroke-dasharray: 100;
    animation: dash 5s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 1000;
    }
}

效果如下:

想像一下,当虎线的小线条足够长,超过图形的整个线条长度时。将会是一个什么样子呢?

那怎么知道自己绘制的线条有多长呢?可以通过 getTotalLength() 方法来获取。比如上面的示例:

document.querySelector('.path').getTotalLength() // => 1038.357666015625

也就是说上面示例的线条(路径)的总长度是 1038.357666015625px 。如果我们把 stroke-dashoffset 的值设置超过这个长度,比如我们设置为 1039 ,将会是什么样子呢?还是能过浏览器检测器来给大家演示:

这个时候很有意思了。把上面的动画再做一下调整:

.path {
    stroke-dasharray: 1039;
    stroke-dashoffset: 1039;
    animation: dash 8s linear both;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

效果如下:

在CSS中,可以把 animation 属性中的 animation-fill-mode 设置成 forwards 或者 both ,这样整个动画就会在它的最终状态停止。

有关于 animation-fill-mode 的详细介绍,可以阅读早前整理的相关教程《 你所不知道的 animation-fill-mode 细节 》和《 理解 animation-fill-mode 属性 》。

为了更好的理解SVG的 strokestroke-dasharraystroke-dashoffset 相关的知识。将上面的几个属性结合Vue写了一个简单的工具,可以通过修改对应的值。更能帮助大家理解SVG线条动画的工作原理。

总结

这篇文章一步一步带着大家怎么理解SVG的线条动画工作的原理。其实要实现一个线条自画的动效很简单,首先通过绘制路径的工具拿到所需线条的路径。然后通过 stroke-dasharray 设置线条为虚线,利用CSS的 animation 来改变 stroke-dashoffset 的值,创建一个线段移动的效果。如果将 stroke-dasharraystroke-dashoffset 值设置为路径的长度(最好是大于其长度,可以通过 .getTotalLength() 获取到路径的长度),在 @keframes 中的 100% 处设置 stroke-dashoffset 的值为 0 就可以实现线条自画的一个动画效果。

是不是很简单呀。这就是上一节所说的SVG的线条之美。其实不仅仅这些,后续还会继续围绕SVG线条的动画展开深入介绍,以及实战。希望大家喜欢,更希望对大家有所帮助。

特别声明:文章的思路来自于 @CHRIS COYIER 在2014年发布的一篇教程《 https://css-tricks.com/svg-line-animation-works/ 》。

上一节

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3:核心技术与案例实战 》。

如需转载,烦请注明出处: https://www.w3cplus.com/svg/svg-line-animation-works.html

W3CPlus责编内容来自:W3CPlus (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » SVG之旅:SVG线条动画实现原理

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录