动画点缀的路径，一个接一个的点

debugcn 发表于 Dev

斯文

我正在使用最新版本的Snap.svgpath在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);

尽管这很好用（如您在此处看到的），但我想使其成为一条虚线，一个接一个的动画。

我建立了一个带有圆圈的快速原型（您可以在这里看到），以说明外观，但是从技术上讲，我希望它基于一个custom path。

基本上，我正在寻找一种为点（复杂）路径设置动画的方法。因此具有属性的路径与路径上的圆圈一样好。

艾尔南

由于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中减去它们

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。