javascript - 如何实现 svg 行的渐进式动画

Question

我正在尝试为 svg 线路径实现渐进式动画。我使用的路径类似于 M L M L ..... .. 解决这个问题动画将无法完美运行。

这是我的代码，

var distancePerPoint = 1;
var drawFPS          = 100;

var orig = document.querySelector('path'), length, timer;
var a = document.querySelector('svg');
a.addEventListener('mouseover',startDrawingPath,false);
a.addEventListener('mouseout', stopDrawingPath, false);

function startDrawingPath(){
    length = 0;
    orig.style.stroke = 'green';
    timer = setInterval(increaseLength,600/drawFPS);
}

function increaseLength(a){
    var pathLength = orig.getTotalLength();
    length += distancePerPoint;
    orig.setAttribute("stroke-dasharray", length + ' ,2000');
    if (length >= pathLength) clearInterval(timer);
}

function stopDrawingPath(){
    clearInterval(timer);
    orig.style.stroke = '';
}

<svg id="asd" width="706" height="600">
    <path stroke="red" stroke-width="2" d="M 0 239.34 L 105.75 299.25 M 105.75 299.25 L 211.5 279.28 M 211.5 279.28 L 317.25 259.31 M 317.25 259.31 L 423 259.46 M 423 259.46 L 528.75 99.55 M 528.75 99.55 L 634.5 199.40000000000003 " />
</svg>

如果我将线路径添加为 M L L L L 意味着它将完全按照我的预期工作..但我需要在 M L M L M L 中具有相同的行为...

如何在不使用css的情况下实现...

Answer 1

你的意思是你想让子路径一个接一个地动画，而不是同时全部？

答案是你不能。破折号模式在每个子路径的开始处开始/重置(每个移动“M”)。除了:

1. 通过删除不必要的“M”命令来修复路径，或者
2. 将线路拆分成单独的路径，然后一个接一个地触发它们。