Question

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

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

FabricJS：延迟重复动画

1 个答案: