snap.svg 实战：SVG 路径 (path) 描边绘制跟随动画

先看效果：

效果来源于codepen。

要完成这个效果，有很多种方法。今天来看看使用snap.svg这个js库是如何来完成这个效果的。

关于snap.svg的使用方法，可以去看看以前的这篇文章，Snap.svg 基本知识入门。

准备基本的结构：

    <div>
        <svg class="svg" id="svgA" width="300" height="300" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" />
    </div>

下面主要来分析下两个关键的点。

从效果图可以看到，主要是由一个正方形的路经和一个圆圈组成，这里使用snap.svg来绘制这两个元素。首先是绘制正方形元素：

var snapA = Snap("#svgA");

  // SVG A - "Squiggly" Path
  var myPathA = snapA.path("M1 1 H 300 V 300 H 1 L 1 1").attr({
    id: "squiggle",
    fill: "none",
    strokeWidth: "4",
    stroke: "#ffffff",
    strokeMiterLimit: "10",
    strokeDasharray: "9 9",
    strokeDashOffset: "988.01"
  });

代码很直观，全部是设置path的stroke的一些基本属性。这里说下strokeMiterLimit这个属性，它对应着svg中的stroke-miterlimit属性。

当两条线相遇会形成一个尖角，stroke-miterlimit属性就是允许这个交汇处/转角可以延伸到多远的规格。

交汇处的长度也被称为斜接长度，测量的是交汇处内角和外角之间的距离。

这个值就是斜接长度和stroke-width的比值的一个界限值。值越大则线段的转折出就会产生尖角。就如上面图中所示的那样线与线的交汇处是尖尖的角。

然后就是绘制这段路径了，依然是操作stroke-dasharray和stroke-dashoffset这两个属性。关于路经绘制的原理，说了很多了，比如SVG 路径描边动画 (path animation) 实战应用可以去看看。

// 获取path的长度
  var len = myPathA.getTotalLength();

  // 使用animate方法来绘制path
  myPathA.attr({
      stroke: '#fff',
      strokeWidth: 6,
    fill: 'none',
    "stroke-dasharray": len + " " + len,
    "stroke-dashoffset": len
  }).animate({"stroke-dashoffset": 10}, 2500,mina.easeinout);

圆形的绘制跟路径(path)绘制差不多，这里就不说了。来看下圆形跟随路径绘制运动效果的实现。

  setTimeout( function() {
    Snap.animate(0, len, function( value ) {
       movePoint = myPathA.getPointAtLength( value );
       CircleA.attr({ cx: movePoint.x, cy: movePoint.y }); 
    }, 2500,mina.easeinout);
  });

因为是先绘制才开始运动，所以使用定时器来执行圆形的动画效果。

圆形跟随路径运动的一个关键是根据路径长度的变化来获取对应的坐标值，并且同步改变圆形的坐标值，这样就实现了圆形跟随路径运动的动画效果。即：

movePoint = myPathA.getPointAtLength( value );
CircleA.attr({ cx: movePoint.x, cy: movePoint.y });

一个简单的路经(path)绘制跟随动画就完成了。

详细代码查看这里。