Question

我正在尝试为svg线路径实现渐进式动画。我正在使用像M L M L这样的路径.......对这个问题做动画将无法正常工作。

这是我的代码，

＆＃13;

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 = '';
}

＆＃13;

<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>

＆＃13;

如果我将行路径添加为M L L L L意味着它将完全符合我的预期......但我需要在M L M L M L中使用相同的行为......

如何实现...而不使用css

Answer 1

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

答案是你不能。虚线图案在每个子路径的开始处开始/重置（每次移动＆＃39; M＆＃39;）。除此之外别无他法：

通过删除不必要的＆＃39; M＆＃39;来修复路径。命令，或
将线条分成不同的路径，然后一个接一个地触发它们。

Answer 2

你正试图使用＆＃39; stroke-dasharray＆＃39;来设置线条的动画。属性。但这分别适用于每个线基元，而不是整个路径。正如您在结果中看到的那样。路径中的每个M组件都将重置svg路径渲染器中的内部笔划长度值。

更直接的解决方案是为路径数据本身设置动画。或者只是在动画框架中添加路径元素。

如何实现svg线的渐进式动画

2 个答案: