Javascript FabricJS：延迟重复动画

因此，我使用Fabric JS为一个圆设置动画，如下所示：

                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来延迟。是否有更好的方法可以使用？

设置超时应该是动画的最佳解决方案，但您也可以检查哪种方法只是更改持续时间和半径

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();
                    }
                });
}