扣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動畫不工作

回答

相關問題