snap svg 动画不起作用答案

【问题标题】：snap svg animation does not workssnap svg 动画不起作用
【发布时间】：2018-02-26 20:30:47
【问题描述】：

我正在尝试使用 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);
    }
}

它让我折痕！怎么了？

【问题讨论】：

标签： javascript animation svg snap.svg

【解决方案1】：

您的代码存在一些问题。

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

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

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

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

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

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


       }, 1000);
 })();

jsfiddle

【讨论】：

【解决方案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);
    })();
}

}

【讨论】：