FabricJS：私はそうのように、円をアニメーション化するファブリックJSを使用していますので、

Question

遅延でアニメーションを繰り返す：

   var clickedPulse = new fabric.Circle({ 
        radius: 5, 
        fill: 'rgba(0,0,0,0)', 
        stroke: 'rgba(0,0,0,0.7)', 
        strokeWidth: 3, 
        left: options.e.layerX, 
        top: options.e.layerY, 
        selectable: false, 
        hasBorders: false, 
        hasControls: false, 
        originX: 'center', 
        originY: 'center' 
       }) 
       canvas.add(clickedPulse); 
       clickedPulse.animate({ 
        radius: 100, 
        opacity: 0 
       },{ 
        onChange: canvas.renderAll.bind(canvas), 
        duration: 700, 
        onComplete: function() { 
         clickedPulse.remove(); 
         canvas.renderAll(); 
        } 
       }); 

これは私の作品罰金 - それはその不透明度を下げ、その半径が増加、1円をアニメーション化それが最終的に消えるまで。

私が望むもの：3つの円はすべて同じアニメーションをしていますが、各円はお互いに遅れています。最終効果は中心点から3つの波紋が出てくるようです。

Fabric JSを使用してこれを実現するにはどうすればよいですか？私は同じアニメーションを繰り返すことを考えましたが、毎回それを遅らせるためにsetTimeoutを使用しました。私が使用できるより良いアプローチはありますか？

Answer 1

setTimeoutはアニメーションに最適な解決策になるはずですが、継続時間と半径を変更するだけのfiddleもチェックすることができます。

for (var i = 1; i < 4; i++){ 
    var clickedPulse = new fabric.Circle({ 
        radius: 5, 
        fill: 'rgba(0,0,0,0)', 
        stroke: 'rgba(0,0,0,' + (1 - i/4) + ')', 
        strokeWidth: 5, 
        left: 150, 
        top: 150, 
        selectable: false, 
        hasBorders: false, 
        hasControls: false, 
        originX: 'center', 
        originY: 'center' 
       }) 
       canvas.add(clickedPulse); 
       clickedPulse.animate({ 
        radius: 100 - i*15, 
        opacity: 0 
       },{ 
        onChange: canvas.renderAll.bind(canvas), 
        duration: 600 + i*200, 
        onComplete: function() { 
         clickedPulse.remove(); 
         canvas.renderAll(); 
        } 
       }); 
}