快照SVG动画不起作用

Question

我正在尝试使用stroke-dashoffset和stroke-dasharray属性为线设置动画。 它是带有圆圈和线连接器的复杂图形。 我使用Snapsvg，这是我的身材，例如，它经过了简化：

<svg version="1.1" id="fImg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 345 320">
  <g id="balls">
    <circle cx="125" cy="9.3" r="6.7"/>
    <circle cx="230.2" cy="63.5" r="6.7"/>
    <circle cx="211.6" cy="18.3" r="6.7"/>
    <circle cx="292.6" cy="63.5" r="6.7"/>
  </g>
 <g id="lines">
    <line class="st0" x1="103.8" y1="11.6" x2="125" y2="9.3"/>
    <line class="st0" x1="103.8" y1="11.6" x2="115.8" y2="44.9"/>
    <line class="st0" x1="103.8" y1="11.6" x2="85.9" y2="32.4"/>
    <line class="st0" x1="85.9" y1="32.4" x2="115.8" y2="44.9"/>
</g>
</svg>

我使用“捕捉”功能来设置圆的属性并为其设置动画。 lineDrow行的回调函数，但仅在.animate({.....}, 1000)之前.animate({.....}, 1000) ：

var balls = Snap("#balls");
balls.attr({
    fill:'rgba(0,0,0,0)'
}).animate({
    fill: '#ccc'
}, 2000, mina.easeout, lineDraw);


function lineDraw() {
    var lines = document.querySelectorAll("#lines line");
    for (var i = 0; i < lines.length; i++) {
        var line = Snap(lines[i]),
            x = Math.ceil(line.getTotalLength());

        line.attr({
            'strokeDasharray': x,
            'strokeDashoffset': x,
            'stroke-width': 1,
            'stroke-linecap':'round',
            'stroke': '#ccc'
        }).animate({
            'strokeDasharray': 0,
            'strokeDashoffset': 0
        }, 1000);
    }
}

而且它使我折皱！ 怎么了？

Answer 1

您的代码有几个问题。

首先，您不能在我不认为的行上使用getTotalLength，因此您必须创建一个小函数或一些东西来计算行的长度（或使用路径，因为getTotalLength在此起作用）。

Snap没有将strokeDasharray和strokeDashoffset作为可设置动画的属性（除非在最新版本中如此），但是，我们可以使用Snap.animate方法在任意两个值之间进行动画处理

Snap.animate（从，到，函数，持续时间，回调）。 注意from和to也可以是要插值的数组，例如[0,0,0]至[3,100,5]。

因此，仅使用Snap.animate方法，我们就可以从行长内插到0。注意，在这种情况下，我不得不使用立即模式函数闭包，就像您在很多不同的行上使用它一样，希望确保每个动画在调用时都在范围内（否则它将仅对最后一行进行动画处理）。 如果只有1件东西可以进行动画处理，则可以去除多余的功能/关闭代码。

因此，它看起来像这样（只是交换一个行长而不是100的值），这是一个类似的问题，我想您可能会在Snap松弛通道中被问到，我在那里回答过。 该代码应该仍然足够相似，以匹配您修改后的代码。

(function() {
  var lineClosure = line;
  Snap.animate(100, 0, function( val ){
      lineClosure.attr({
                'strokeDasharray': val,
                'strokeDashoffset': val,
            });


       }, 1000);
 })();

jsfiddle

Answer 2

谢谢，现在可以使用了：

function lineDraw() {
function mult(e) {return e*e;}
var lines = $("#lines line");
for (var i = 0; i < lines.length; i++) {
    var line = Snap(lines[i]);
    var x = (Math.ceil(Math.sqrt(
        mult(lines[i].x2.baseVal.value - lines[i].x1.baseVal.value) +
        mult(lines[i].y2.baseVal.value - lines[i].y1.baseVal.value) )));
    line.attr({
        'strokeDasharray': x,
        'strokeDashoffset': x,
        'stroke-width': 1,
        'stroke-linecap':'round',
        'stroke': '#ccc'
    });
    (function() {
        var lineClosure = line;
        Snap.animate(x, 0, function( val ){
            lineClosure.attr({
                'strokeDashoffset': val,
            });
        }, 2000);
    })();
}

}