svg 动画以描边以及文字书写 使用

这几天研究了一下svg这个东西  ， 不知道怎么整理，就记录一下代码吧。

首先是素材的准备 ，简单的tu图形可以使用svg 的代码自己画出来 。但是稍微复杂一些的图形就很麻烦了，这里keyi可以使用一些编辑器来辅助做图，网上有一些 ，我直接用的是AI导出的svg文件。

然后就是代码：

HTML

<div class="box">

    <img id="img" src="123.png" alt="">
    <svg  class="svg" width="100% " height="200" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">

        <path  class="path" id="path" d="M100,198.7c-34.7,0-69.6-9.4-69.6-30.4c0-16.4,23.9-26.6,46.2-29.1l1.2-0.1L47,89.8c-1-1.8-1.9-3.7-2.8-5.6
	l-0.8-1.6L43.4,82c-2.7-7-4.1-14.3-4.1-21.8c0-33.5,27.2-60.7,60.7-60.7c33.5,0,60.7,27.2,60.7,60.7c0,7.5-1.4,14.8-4.1,21.8
	l-0.4,1.1h0l-0.3,0.6c-0.9,2.1-1.9,4.1-2.9,6L100,177.7l-12.6-20.5l-0.5,0c-20.4,1.7-33.3,7.4-36.7,10.5l-0.6,0.6l0.6,0.6
	c4.4,4.1,21.5,10.7,48.6,10.8l2.4,0l0,0c27-0.2,44.1-6.7,48.6-10.8l0.6-0.6l-0.6-0.6c-2.5-2.2-11.5-6.5-25.5-9.1l10.7-17.1
	c22.3,5,34.6,14.5,34.6,26.8C169.6,189.3,134.7,198.7,100,198.7L100,198.7L100,198.7z M100,27.4c-14.3,0-25.9,11.6-25.9,25.9
	c0,14.3,11.6,25.9,25.9,25.9c14.3,0,25.9-11.6,25.9-25.9C125.9,39.1,114.3,27.4,100,27.4L100,27.4z"/>

    </svg>
</div>

 这里有一点需要注意

 

 这一块很重要，实现path标签的缩放自适应，后面的数值根据图片的尺寸来填写！

JS

<script>
    var current_frame = 0;
    var total_frames = 60;
    var path ;
    var length;

        path = document.getElementById('path');
        img = document.getElementById('img');
        l = path.getTotalLength();
        length = l;
        path.style.strokeDasharray = l + 10;
        path.style.strokeDashoffset = l;

    var handle = 0;

    var draw = function() {
        var progress = current_frame/total_frames;
        if (progress > 1) {
            window.cancelAnimationFrame(handle);
            path.style.opacity = 0;
            img.style.opacity = 1;
        } else {
            current_frame++ ;

            path.style.strokeDashoffset = Math.floor(length * (1 - progress));

            handle = window.requestAnimationFrame(draw);
        }
    };
    draw();
</script>

这没啥好说的直接复制就能用，介绍一下属性吧。

最后再加个文字效果的svg帖子

 path.getTotalLength() ：这个方法用来获取path 上的长度  

stroke-dasharray ：用于创建xuxi虚线

stroke-dashoffset : 定义一条线，文本或元素距离（相当于基于position：relative；设置left值。只是不像left单纯的基于x方向设置， stroke-dashoffset是基于svg路径设置的）

stroke-dasharray和stroke-dashoffset相结合就可以实现线条的动画效果（

首先  stroke-dasharray =  path.getTotalLength() 。

然后stroke-dashoffset长度 > stroke-dasharray长度即可。）

然后就没了。

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]);