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，function，duration，callback）。注意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);
    })();
}

}

snap svg动画不起作用

2 个答案: