snap svgアニメーションが動作しない

Question

stroke-dashoffsetとstroke-dasharrayという属性のアニメーションを作成しようとしています。それは円とラインコネクターで複雑な数字です。

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

私は円の属性を設定し、それをアニメーション化するスナップ機能を使用します。私はここでは、例えば単純化された、私のフィギュアで、Snapsvgを使用しています。 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.animate方法

Snap.animateで任意の2つの値の間でアニメーション化することができ、しかし、アニメート属性としてstrokeDasharrayとstrokeDashoffsetを持っていませんto、function、duration、コールバック）。 fromとtoは、[0,0,0]〜[3,100,5]などの間で補間する値の配列でもあります。

Snap.animateメソッドを使用するだけで、行の長さを0に補間することができます。この場合は、即時モード関数クロージャを使用する必要があります。呼び出されたときに各アニメーションに範囲内の行があることを確認したい（そうでない場合、最後の行のみがアニメートされます）。アニメーション化することが1つしかない場合は、余分な関数/クロージャーコードを取り除くことができます。

これは（100の代わりに線の長さの値を入れ替えるだけで）このように見えますが、これは私がそこで回答したスナップスラックチャンネルで尋ねられると思うのと同様の質問でした。コードはあなたの修正されたコードと一致するのに似ていなければなりません。

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

}