Raphaeljs間隔後動畫路徑

Question

我有一個路徑，我想動畫每5秒。我在下面的代碼中嘗試使用setInterval，但它不斷複製畫布。有更簡單的解決方案嗎？

JS小提琴Link

window.onload= function aa() { 

    paper = Raphael(0,0,900,900);  

    var p=paper.path("M10,10 h20 v10 h-20z"); 
    p.animate({path:"M10,10 h300 v10 h-300z"},5000); 

    //window.setInterval(aa(), 5000); 
}​ 

Answer 1

你都在重複着整個aa函數初始化拉斐爾紙（paper = Raphael(0,0,900,900);）。這就是爲什麼你的畫布被複制。
此外，最好使用回調（您可以在animate上看到the docs）而不是setInterval來觸發您的動畫。
這是我會怎樣代碼時：

function init(){ 
    var paper = Raphael(0, 0, 900, 900), 
     pathsString = ["M10,10 h20 v10 h-20z","M10,10 h300 v10 h-300z"], 
     p = paper.path(pathsString[0]), 
     animationCounter = 0, 
     animationDuration = 5000, 
     animate = function(){ 
      animationCounter++; 
      p.animate({path : pathsString[animationCounter %2]}, animationDuration, animate); 
     }; 

    animate(); 
}; 
window.onload = init;​ 

下面是上面代碼的a working example。