SVG 实战应用：使用 Web Animations API 来实现文字书写动画效果

SVG的一大应用场景就是实现描边的动画效果，利用stroke-dasharray和stroke-dashoffset这两个属性可以轻易实现，如下所示的动画效果：

之前也有几篇文章讲过使用SVG和CSS3中的animation来实现这个效果，可以去看看SVG 路径描边动画 (path animation) 实战应用等等，这次来讲讲使用Web Animations API这个新的动画方法来实现。

至于Web Animations API基础的使用方法可以去这里看看，这里就不再说了。

废话不多说，就来看看上面写字的动画效果是如何实现的，效果是直接在codepen上看到的。

代码地址。

首先在AI等矢量设计软件中，把文字转换为轮廓，然后导出为SVG文件就可以得到文字的path了，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 40">
    <title>I dwell in possibility</title>
  <g fill="none" stroke="#000">
     <path d="M20.15 22.62c-3.74-3.67-7.94-9.77-5-15 2.5-3.16 5.88 1.35 5 4.2-.66 5.23-2 11.08-6 14.8-2.95 2.62-8.04.02-7-4 1.15-1.88 3.52-.9 5 0"/>
    <path d="M48.15 21.62c-1.27-5.3-9.5-2.8-9 2.1-.4 4.65 7.2 5.37 8 .9l6-18m-4 12c-.22 2.87-2.37 6.7 0 9 3.02.14 4.57-2.8 6-5"/>
    <path d="M58.15 18.62c-2.7 1.97-4.1 6.13-2 9 2.53.45 4.45-1.22 6-3m2-6c-.45 2.87-3.6 6.56-1 9 4.88.6 7.7-4.72 7-9m0 0c-.08 3.47 2.6 6.87 5.95 4.02l.05-.02"/>
    ...
    <path d="M262.15 22.62c2.5-5.4 1.76-3.03.27 1.18-1.98 3.77 3.02 5.1 5.1 2.44 1.56-1.28 2.53-2.97 3.63-4.62m1-3c-2.4 6.64-4.1 13.56-7 20-3.85 3.06-3.5-3.64-1.62-5.38 3.73-4.66 10-5.83 13.62-10.62"/>
  </g>
</svg>

接下里就是用js来实现具体功能了，我们知道要实现这样的描边动画效果，首先要获取path的长度用来设置stroke-dasharray和stroke-dashoffset的值。然后使用Web Animations API中的animate方法来把stroke-dashoffset的值从它的长度设置为0，就会产生书写出来的动画效果。

下面来实现具体的功能，先是一些初始化的设置：

var strokes = [],
paths = document.getElementsByTagName("path"),
j = 0;

for (let i = 0; i < paths.length; i++) {
    strokes[i] = paths[i].getTotalLength();
    paths[i].style.strokeDashoffset = paths[i].getTotalLength();
    paths[i].style.strokeDasharray = paths[i].getTotalLength();
}

先获取所有的path，并且使用getTotalLength()方法来获取path的长度，从而设置每一个path的strokeDashoffset和strokeDasharray的值。

然后是使用Web Animations提供的animate方法来动态更新path的strokeDashoffset和strokeDasharray的值。

function strokeLetter(letter, pathDist) {
         letter.animate([
             { strokeDashoffset: pathDist },
             { strokeDashoffset: '0' }
             ], {
        duration: pathDist * 7,
        fill: 'forwards'
         }).onfinish = function() {
       j++;
             strokeLetter(paths[j], paths[j].getTotalLength());
        }
}

通过上面的代码可以看出Web Animations方法中的属性和CSS3中的animation方法中的属性差不多，相比较起来Web Animations更加的灵活方便，比如提供了回调的方法等等。

最后调用这个方法，整个书写的动画就完成了。

strokeLetter(paths[0], strokes[0]);