svg文本動畫延遲

Question

我想實現像這樣的http://24ways.org/2013/animating-vectors-with-svg/，但我希望每個字母在前一個結束後開始繪製。我不知道如何延遲實施。

這裏是我的代碼：

var init = function() { 

path = new Array(); 
length = new Array(); 

for(var i=1; i<3; i++){ 
     path[i] = document.getElementById('path'+i); 
     length = path[i].getTotalLength(); 
     path[i].style.transition = path[i].style.WebkitTransition = 'none'; 

     length[i] = length; 
     path[i].style.strokeDasharray = length + ' ' + length; 
     path[i].style.strokeDashoffset = length; 

     path[i].getBoundingClientRect(); 
     path[i].style.transition = path[i].style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out'; 

     path[i].style.strokeDashoffset = '0'; 
    } 
}; 

init(); 

在這個例子中

我有兩個字母「SP」和我想的'先畫，然後當完成啓動「P」字母。在我的例子中，兩個字母同時繪製。如果有人能幫助我，我將不勝感激。

這裏是例子http://jsfiddle.net/thLvLkq0/

Answer 1

如何延遲一段時間後只是讓動畫開始？

我分叉你的小提琴讓它像那樣工作。

http://jsfiddle.net/pz19fL7h/

for(var i=1; i<3; i++) { 
    init(i); 
    (function(i) { 
     window.setTimeout(function() { start(i, duration); }, (i-1)*duration); 
    })(i); 
} 

所以基本上，該行爲是：

1. 初始化（隱藏）所有的路徑
2. 將它們全部時間後，開始*我耽誤

如果路徑繪圖的持續時間已知，則應該是e asy做。