如何实现SVG线动画
2015-12-18 17:28 312 0
我相信你肯定已经看过很多SVG绘制路线的动画。非常酷对吧？这篇文章简单介绍如何实现动画，如果你有兴趣，可以看文章下方的扩展阅读。
效果如下，后面会附上CodePen。
不罗嗦，直接进入正题。
绘制路径
首先你需要绘制SVG路径，使用的工具有很多，AI,Sketch,PS,都没装？ 那你还可以试试在线工具。
(省略各种蹩脚抠图操作…)
我使用的是AI的钢笔工具，然后抠抠抠，绘制出你自己喜欢的路线。
大概这样(这里是很多条路径)。
当然最终的路径是不包含酷炫的图片的，我们这里只要路径。
然后另存为SVG,OK。大功告成。你可以安心地去上厕所了。
在html中嵌入
使用SVG的方式很简单，你大可以把它简单理解为img标签。使用编辑器打开SVG文件，直接把它复制到body里面。这样在浏览器上打开就能看到你的路径了。
这里的path就是你画的每一条路径。stroke是描边，fill是填充，stroke-width是描边宽度。所以如果需要简单修改的话，直接在代码里面改就可以。
当然我只能说些简单的，想要了解更多，可以看看张鑫旭大哥的博客理解SVG的viewport,viewBox,preserveAspectRatio
虚线描边
比如，我使用css
.wukong-svg {
stroke-dasharray: 10;
}
我的路径变成这样：
这是一张静态的图片…它把我的路径断开了，所以看到的，就是稀稀拉拉的线段。更好的理解，看下面两张图。
stroke-dasharray的值是随意的，你可以给大一些。这得看你需求。
让它动起来
接着，这些描边是可以移动的。我们使用stroke-dashoffset属性和animation来是实现动画效果。
.wukong-svg {
stroke-dasharray: 100;
animation: dash 5.5s forwards linear infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
opacity: 1;
}
to {
stroke-dashoffset: 0;
}
}
我去掉Demo中的opacity以及把stroke-dasharray设为100，那么效果是这样的。
注意
如果你像我一样在整个SVG上做动画，那么animation的值将作用于所有path上。你也可以把某条path单独提取出来实现动画。
看到这里，你应该明白，stroke-dasharray是用来设置每段虚线的长度。而stroke-dashoffset是用来设置移动的距离。所以实际上，stroke-dashoffset的大小，以及stroke-dasharray的大小，是要根据的自己的路径去填的。
你还可以使用JavaScript去获取路径长度。
var path = document.querySelector('.path');
var length = path.getTotalLength();
CodePen
喜欢的话，你可以Fork一下。
扩展阅读
-
How SVG Line Animation Works by Chris Coyier
-
animated-line-drawing-svg by Jake Archibald
-
animating-vectors-with-svg by Brian Suda
-
polygon-feature-design-svg-animations-for-fun-and by Polygon
-
SVGDrawingAnimation by Codrops
