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

Question

我使用的是最新版本的 Snap.svg绘制和动画 path在 SVG 中:

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 )构建了一个快速原型(prototype)来说明外观，但从技术上讲，我希望它基于自定义 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 中减去它们