动画虚线路径，一个点接一个

Question

我正在使用最新版本的 Snap.svg 在 SVG 中绘制 path 并为其设置动画：

var s = Snap('#svg');
var getPath = s.path('M15 15L115 115');
var pathLength = getPath.getTotalLength();
getPath.attr({
  stroke: '#000',
  strokeWidth: 5,
  strokeDasharray: pathLength + ' ' + pathLength,
  strokeDashoffset: pathLength,
  strokeLinecap: 'round'
}).animate({
  strokeDashoffset: 0
}, 1500);

虽然这工作正常（如您所见here），但我想将其设为虚线，一个接一个地为点设置动画。

我已经构建了一个带有圆圈的快速原型（您可以看到 here）来说明外观，但从技术上讲，我希望它基于自定义 path。

基本上，我正在寻找一种为虚线（复杂）路径设置动画的方法；所以带有属性的路径就像路径上的圆圈一样好。

Answer 1

因为 stroke-dasharray 可以是一个值数组，您可以将 stroke-dashoffset 保留为 0 并更新 stroke-dasharray 直到到达完整的行。 类似这样的东西，虽然这个例子不是很流畅和优化。

var s = Snap('#svg');
var getPath = s.path('M15 15L115 115');
var pathLength = getPath.getTotalLength();

var perc = 0;
var dotLength = 5;
var gapLength = 4;

getPath.attr({
    stroke: '#000',
    strokeWidth: 1,
    strokeDasharray: 0,
    strokeDashoffset: 0,
    strokeLinecap: 'round'
});

function updateLine(){
 perc +=1;
    if(perc>100){
        perc = 100;
    }
var visibleLength = pathLength*perc/100;
var drawnLength = 0;
    var cssValue = '';
    while(drawnLength < visibleLength){
     drawnLength += dotLength;
        if(drawnLength < visibleLength){
            cssValue += dotLength+ ' ';
            drawnLength += gapLength;
            if(drawnLength < visibleLength){
                cssValue += gapLength+ ' ';
            }
        }else{
            cssValue += (visibleLength + dotLength - drawnLength)+ ' ';
        }
    }
    cssValue += pathLength;
    if(perc<100){
     setTimeout(updateLine, 100);
    }
    getPath.attr({
        strokeDasharray: cssValue
    });
}

updateLine();

http://jsfiddle.net/EEe69/7/

如果你想在动画中“跳过”间隙，你应该从 pathLength 中减去它们

Answer 2

为什么不使用d3？

有一个基于鼠标移动的虚线示例。我started 一个定时函数来做你想做的事情，但我认为你可以弄清楚:)

看看这部分，看看你是否可以调整它来做一个特定的路径而不是d3.mouse：

d3.timer(function(step) {
    var svgagain = d3.select("body").select("svg")
        .on("mousemove", function() { var pt = d3.mouse(this); tick(pt); });
});