FabricJS：延迟重复动画

Posted 2023-03-25

【中文标题】FabricJS：延迟重复动画

【英文标题】：FabricJS: Repeating an animation with a delay

【发布时间】：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 来延迟它。我可以使用更好的方法吗？

【参考方案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();
                    
                );