SVG线画如何实现

蔚落 2022-08-25 05:25 232阅读 0赞

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

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

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

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

1. 呐，你有一个SVG Shape

![SouthEast][]

2.这个Shape必须有stroke

![SouthEast 1][]

3.Stoke可以是虚线

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

.path {
      stroke-dasharray: 20;
    }

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

![SouthEast 2][]

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

.path {
      stroke-dasharray: 100;
    }

![SouthEast 3][]

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

.path {
      stroke-dasharray: 100;
      animation: dash 5s linear;
    }
    
    @keyframes dash {
      to {
        stroke-dashoffset: 1000;
      }
    }

![animate-stroke.gif][]

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;
      }
    }

![animate-stroke-full.gif][]

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

但是，为什么要使用js？

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

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

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

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

\---------------------------------------------------------------

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

[CSS-TRICKS]: http://css-tricks.com/
[How SVG Line Animation Works]: http://css-tricks.com/svg-line-animation-works/
[SVG]: http://blog.csdn.net/whqet/article/details/18982747
[Link 1]: http://jakearchibald.com/2013/animated-line-drawing-svg/
[24 Ways]: http://24ways.org/
[Link 2]: http://24ways.org/2013/animating-vectors-with-svg/
[Link 3]: http://product.voxmedia.com/post/68085482982/polygon-feature-design-svg-animations-for-fun-and
[Link 4]: http://tympanus.net/Development/SVGDrawingAnimation/
[SouthEast]: /images/20220824/7afa10c476e34337b2b89f3863dffe2a.png
[SouthEast 1]: /images/20220824/7e556437e25d46c99766b352f2d21dbc.png
[SouthEast 2]: /images/20220824/61cfba52979648f2bd53ee98ea24bd4f.png
[SouthEast 3]: /images/20220824/48c885d84d1144d59466ecc1acf8ba17.png
[animate-stroke.gif]: http://cdn.css-tricks.com/wp-content/uploads/2014/02/animate-stroke.gif
[animate-stroke-full.gif]: http://cdn.css-tricks.com/wp-content/uploads/2014/02/animate-stroke-full.gif
[Link 5]: http://codepen.io/chriscoyier/pen/bGyoz