SVG线画如何实现

本文翻译自CSS-TRICKS的站长CSS大牛CHRIS COYIER（同时也是Codepen的站长）的文章《How SVG Line Animation Works》，文章不逐字翻译，以意译为主。

另外说一句，本博客发表的文章《SVG奥林匹克五环动画》用的也是这个原理，总是感觉说不清原理，同时学习下大牛的表达方式。

我打赌你们所有人都看到过一个超酷的效果，SVG的路径绘制动画。Jake Archibald曾经首先解释过其技术原理，并且写了一篇交互十足的博客进行阐释，Brian Suda也在24 Ways上写了一篇文章，在一个自主博客中谈到了多边形的超牛效果，Codrop上也有一些优雅的案例。

除非我脑子里弄明白，一般我很少写出来，所以当它打动我的时候，我觉得我应该把它再写出来。

1. 呐，你有一个SVG Shape

SVG线画如何实现

2.这个Shape必须有stroke

SVG线画如何实现

3.Stoke可以是虚线

我们可以使用Illustrator绘制图形，也可以通过编程实现。让我们来看看CSS应用虚线

<svg ...>
  <path class="path" stroke="#000000" ... >
</svg>

.path {  stroke-dasharray: 20;}

这样我们可以得到一个20px的虚线

SVG线画如何实现

4.这个虚线可以更长点，效果见下图。

.path {
  stroke-dasharray: 100;
}

5.我们可以offset虚线，实现动画，效果见下图。

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

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

6.现在想象下，如果虚线足够长到正好覆盖整个图形。

你只要给stroke-dasharray属性一个足够长的值，需要超过图形中线的长度。

7.移动stroke使它正好不覆盖整个图形。

8.好的，将stroke-offset的值移动到0,实现动画。

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

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

Tata！大家可以到CHRIS COYIER的codepen在线看看效果。

但是，为什么要使用js？

几乎所有的SVG线框绘制动画都是用js，那是因为我们很难知道描边的确切长度，我们在上面的教程里看似随机的使用了一个非常合适的长度1000.

你可以通过貌似下面的代码获得长度

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

好了，现在你可以随时使用了。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

秒客网

SVG线画如何实现

相关文章