如何实现SVG线动画

我相信你肯定已经看过很多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

  
  

出处:http://w3ctrain.com/2015/08/20/svg-animation/