如何实现SVG线动画

我相信你肯定已经看过很多SVG绘制路线的动画。非常酷对吧?这篇文章简单介绍如何实现动画,如果你有兴趣,可以看文章下方的扩展阅读。

效果如下,后面会附上CodePen。

https://dn-w3ctrain.qbox.me/svg-animation_svg.gif

不罗嗦,直接进入正题。

绘制路径

首先你需要绘制SVG路径,使用的工具有很多,AI,Sketch,PS,都没装? 那你还可以试试在线工具

(省略各种蹩脚抠图操作…)

我使用的是AI的钢笔工具,然后抠抠抠,绘制出你自己喜欢的路线。
大概这样(这里是很多条路径)。
https://dn-w3ctrain.qbox.me/svg-animation_wukong-path.jpg

当然最终的路径是不包含酷炫的图片的,我们这里只要路径。
然后另存为SVG,OK。大功告成。你可以安心地去上厕所了。

在html中嵌入

使用SVG的方式很简单,你大可以把它简单理解为img标签。使用编辑器打开SVG文件,直接把它复制到body里面。这样在浏览器上打开就能看到你的路径了。

https://dn-w3ctrain.qbox.me/svg-animation_svgcode.jpg

这里的path就是你画的每一条路径。stroke是描边,fill是填充,stroke-width是描边宽度。所以如果需要简单修改的话,直接在代码里面改就可以。

当然我只能说些简单的,想要了解更多,可以看看张鑫旭大哥的博客理解SVG的viewport,viewBox,preserveAspectRatio

虚线描边

比如,我使用css

.wukong-svg {
  stroke-dasharray: 10;
}

我的路径变成这样:

https://dn-w3ctrain.qbox.me/svg-animation_wukong.png

这是一张静态的图片…它把我的路径断开了,所以看到的,就是稀稀拉拉的线段。更好的理解,看下面两张图。

svg-animation_svg-shape.png

svg-animation_dashed-shape.png

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,那么效果是这样的。
https://dn-w3ctrain.qbox.me/svg-animation_wukong.gif

注意

如果你像我一样在整个SVG上做动画,那么animation的值将作用于所有path上。你也可以把某条path单独提取出来实现动画。

看到这里,你应该明白,stroke-dasharray是用来设置每段虚线的长度。而stroke-dashoffset是用来设置移动的距离。所以实际上,stroke-dashoffset的大小,以及stroke-dasharray的大小,是要根据的自己的路径去填的。
你还可以使用JavaScript去获取路径长度。

var path = document.querySelector('.path');
var length = path.getTotalLength();

CodePen

喜欢的话,你可以Fork一下。

扩展阅读

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