扣SVG动画不工作

我试图用stroke-dashoffset和stroke-dasharray属性动画线。这是一个复杂的图与圆圈和线路连接器。我用Snapsvg，这里是我的身影，这是简化的，例如：扣SVG动画不工作

<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)之前，它的工作原理：

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

这让我起皱！怎么了？

来源

2017-09-18 Gennadiy

有一对夫妇的与您的代码的问题。

首先，你不能在一行我不认为使用getTotalLength，所以你将不得不创建一个小函数或东西来计算行的长度（或使用路径，因为getTotalLength在那里工作）。

快没有strokeDasharray和strokeDashoffset为动画的属性（除非它在最新的版本一样），但是，我们可以用Snap.animate方法

Snap.animate任何两个值之间的动画（从，到，功能，持续时间，回调）。注意from和to也可以是数组之间的内插值，例如[0,0,0]到[3,100,5]。

所以只是用Snap.animate方法，我们可以从插线长度为0。注意，我已经在这种情况下使用即时模式功能关闭，就像你正在使用它有很多的不同线，并且我们希望确保每个动画在被调用时都具有范围内的线（否则它只会动画最后一行）。如果你只有一件东西要动画，你可以摆脱额外的函数/闭包代码。

因此，这将是这个样子（只要换线条的长度值，而不是100），这是一个类似的问题，我想你也许在问，我回答没有对齐松弛通道。代码应该足够类似，以便与修改后的代码相匹配。

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


     }, 1000); 
})();

jsfiddle

来源

2017-09-18 21:32:42 Ian

谢谢，现在它的工作原理：

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

}

来源

2017-09-21 10:20:37 Gennadiy

扣SVG动画不工作

回答

相关问题