FabricJS：延迟重复动画答案

【问题标题】：FabricJS: Repeating an animation with a delayFabricJS：延迟重复动画
【发布时间】：2017-12-04 08:38:28
【问题描述】：

所以我正在使用 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 来延迟它。我可以使用更好的方法吗？

【问题讨论】：

标签： javascript jquery animation fabricjs

【解决方案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();
                    }
                });
}

【讨论】：