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

我使用 Snap 函数为圆圈设置属性并制作动画。 lineDrow - 行的回调函数，但它仅在 .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 方法

在任意 2 个值之间设置动画

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

因此，只需使用 Snap.animate 方法，我们就可以从线长度内插到 0。请注意，在这种情况下，我不得不使用立即模式函数闭包，就像您使用它一样许多不同的线条，我们想确保每个动画在调用时都在范围内（否则它只会为最后一行设置动画）。如果你只有 1 个东西需要动画，你可以去掉额外的 function/closure 代码。

所以它看起来像这样（只需交换线长度的值而不是 100），这是一个类似的问题，我想你可能会在我在那里回答的 Snap slack 频道中问过。该代码应该足够相似以匹配您修改后的代码。

(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);
    })();
}

}

snap svg 动画不起作用

snap svg animation does not works

javascript

animation

svg

snap.svg