拉斐爾JS的動畫圈子

我想用Raphael JS創建的一個點圈起動畫圈子。拉斐爾JS的動畫圈子

這裏是代碼片段我想：

for(var i=1; i<4; i++) { 
    var circle = paper.circle(width*0.4, height*0.2, 10*i); 
    circle.attr(
     { 
      stroke: '#0000d7', 
      'stroke-width': 1, 
      'stroke-linejoin': 'round' 
     } 
    ); 
    circle.animate({transform: "T0,100"}, 2000); 
}

我的動畫完整的圓走。但我首先需要的是最內圈，然後是第二圈，然後是第三圈出現幾毫秒後（作爲效果）。但我不知道該怎麼做。

來源

2017-04-20 beub

你想要的動畫，在任意時間開始？（在這種情況下，我會使用setTimeout並調用一個函數來爲其設置動畫效果）或者之前的動畫完成後（在這種情況下，我將使用動畫中的回調參數）。 – Ian

我希望首先出現最內圈。在第二個圓之後（例如1秒後）。然後是第三個圓圈。 – beub

如果我動畫：如何創建一個動畫對象（在哪裏可以找到文檔）？ – beub

假設這可以擴展到任何數量的圓圈，我會使用setTimeout和一個循環，類似於您正在使用的循環。

要使動畫從循環中工作，必須使用'閉包'，這樣當動畫稍後運行時，它將知道它引用的是哪個圓圈（否則它可能只是動畫最後一個對象）。

使用函數形式（函數（）{}）（）（稱爲立即模式），將確保變量在函數作用域內被捕獲，以便稍後變量正確。

for(var i=1; i<10; i++) { 
    (function() {     // start closure with functional scope 
     var circle = paper.circle(width*0.4, height*0.2, 10*i); 
     setTimeout(function() { circle.animate({transform: "T0,100"}, 2000); }, (i-1) * 2000 ) 
    })(); 
}

jsfiddle

如果你不想在第一次所有的圈子裏，你仍然需要一個封閉捕獲指數i（我們將指派到c，使其在功能清晰）。例如

for(var i=1; i<10; i++) { 
    (function() {     // start functional scope 
     var c = i;     // c is now tied to this scope 
     setTimeout(function() { 
     var circle = paper.circle(width*0.4, height*0.2, 10*c); 
     circle.animate({transform: "T0,100"}, 2000); 
     }, (c-1) * 2000 ) 
    })(); 
}

jsfiddle

我不知道有任何必要在這裏創建一個動畫對象，但如果你想，該文檔是here

相同的例子，但使用拉斐爾。動畫。

var animation = Raphael.animation({transform: "T0,100"}, 2000) 

for(var i=1; i<10; i++) { 
    (function() { 
     var c = i; 
     setTimeout(function() { 
     var circle = paper.circle(width*0.4, height*0.2, 10*c); 
     circle.animate(animation); 
     }, (c-1) * 2000 ) 
    })(); 
}

jsfiddle

來源

2017-04-21 12:53:34 Ian

拉斐爾JS的動畫圈子

回答

相關問題