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:延迟重复动画的主要内容,如果未能解决你的问题,请参考以下文章