svg 线条动画浅尝

看了别人网站的svg动画以为很是舒服,本身尝试实现一下
效果以下:

实现须要明白2个关于svg的css属性

1. stroke-dasharray

stroke-dasharray: <percentage> | <length> | inherit
数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如stroke-dasharray:30 20;,效果以下:

注:可视区域模拟svg的大小方便接下来理解动画

stroke-dasharray:50;若是为一个值那么短划线和缺口同样长

2. stroke-dashoffset

stroke-dashoffset: <percentage> | <length> | inherit
指定了dash模式到路径开始的距离,也就是偏移量
若是不写stroke-dasharray属性,stroke-dashoffset属性就算写出花也看不到效果的。
stroke-dasharray:50;stroke-dashoffset:25px效果以下

这条线向左移动了25px

再试一下
stroke-dasharray:200; stroke-dashoffset:0px

而后动画让stroke-dashoffset的值由0变为200动画就出来了

具体效果点击这里

3.demo地址

最后附上开篇放大镜的地址
放大镜

总结

动画实际上是由stroke-dashoffset的值变化实现的,每一个线条动画实际上是无限个缺口其中的一个，只不过其余的都在svg外面被隐藏起来了。得到每条path或者其余线条的长度(能够找设计要(捂脸))，把stroke-dasharray和stroke-dashoffset的值都设置为线条长度,这时候线条会消失,再用动画把stroke-dashoffset设置为0就ok了。

本篇如能对您有所帮助，实在是感到荣幸。若有不合理之处也请你们多多指点