动画虚线路径，一个又一个的点 [英] Animate dotted path, one dot after another

问题描述

我使用的是最新版本的 Snap.svg 绘制和动画一个路径中的SVG：

I'm using the latest version of Snap.svg to draw and animate a path within a 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);

虽然这是工作的罚款（因为你可以看到这里），我要使它成为一个虚线，动画一个又一个点。

While this is working fine (as you can see here), I want to make it a dotted line, animated one dot after another.

我已经建立了一个快速原型圈子（你可以看到这里），来说明的外观和感觉，但在技术上我希望它立足于一个自定义的路径。

I've built a quick prototype with circles (which you can see here), to illustrate the look and feel, but technically I want it to base on a custom path.

基本上我正在寻找一种方式来制作动画虚线（复）路径;所以用属性的路径是为路径上的圆圈作为罚款。

Basically I'm looking for a way to animate a dotted (complex) path; so a path with attributes would be as fine as circles on a path.

推荐答案

由于中风dasharray可值的数组，你可以在0离开中风dashoffset，直到你到达整条生产线更新行程dasharray。
这样的事情，虽然这个例子是不是真的光滑和优化。

since stroke-dasharray can be an array of values you can leave the stroke-dashoffset at 0 and update the stroke-dasharray until you get to the complete line. something like this although this example is not really smooth and optimized.

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/

如果你想差距是在动画跳过，则应该从路径长度他们。减去

If you want the gaps to be "skipped" on the animation, you should substract them from the pathLength

这篇关于动画虚线路径，一个又一个的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！