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。< / p>

基本上我正在寻找一种为虚线（复杂）路径制作动画的方法;所以带有属性的路径就像路径上的圆圈一样精细。

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/

如果你想要的差距是＆＃34;跳过＆＃34;在动画上，你应该从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); });
});

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

2 个答案: