FabricJS:延迟重复动画

Posted

技术标签:

【中文标题】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();
                    
                );

【讨论】:

以上是关于FabricJS:延迟重复动画的主要内容,如果未能解决你的问题,请参考以下文章

带有pageSnap的FabricJS奇怪的线条动画

FabricJS动画:鼠标:向上和:向下期间画布上的选定对象

FabricJS:始终在画布上居中对象

Fabricjs做组态和流程图-认识Fabricjs

使用 FabricJS 裁剪图像

Fabricjs:显示横幅的预览