Javascript 如何在fabricjs中停止或暂停动画

我正在尝试使用FabricJs停止或暂停矩形的动画。然而，我试图谷歌一个文档，并没有多少关于如何实现它的信息。我将非常感谢任何帮助

const canvas=new fabric.canvas（'c'{
选择：false
});
var hasAnimationStarted=false；
document.getElementById（'button'）。onclick=startAnimation；
var rect=new fabric.rect({
左:10,，
前10名，
填写：“FF0000”，
笔画：“000”，
宽度：50，
身高：50，
});
canvas.add（rect）；
函数startAnimation（）{
if（hasAnimationStarted===false）{
hasAnimationStarted==真；
document.getElementById（'button'）。innerText='Stop Animation'；
矩形动画({
左：250，
}, {
onChange:canvas.renderAll.bind（canvas），
持续时间：6000，
onComplete:function（）{
hasAnimationStarted==假；
document.getElementById（'button'）。innerText='Start Animation'；
},
中止：函数（）{
}
});
}
}

启动动画

从动画的

中止

方法返回真实值，它将停止动画

演示

const canvas=new fabric.canvas（'c'{
选择：false
});
让hasAnimationStarted=false；
document.getElementById（'startAnim'）。onclick=startAnimation；
const rect=new fabric.rect({
左:10,，
前10名，
填写：“FF0000”，
笔画：“000”，
宽度：50，
身高：50，
});
canvas.add（rect）；
函数startAnimation（）{
如果（hasAnimationStarted）{
停止动画（）；
}否则{
hasAnimationStarted=true；
document.getElementById（'startAnim'）。innerText='Stop Animation'；
矩形动画({
左：250，
}, {
onChange:canvas.requestRenderAll.bind（canvas），
持续时间：6000，
onComplete：停止动画，
中止：（）=>！hasAnimationStarted
});
}
}
函数stopAnimation（）{
hasAnimationStarted=false；
document.getElementById（'startAnim'）。innerText='Start Animation'；
}

启动动画

我不太明白为什么它应该返回

！hasAnimationStarted

感谢您的反馈。@Xris如果您从中止条件返回true，它将停止动画。由于我们在停止时将hasAnimationStarted设置为false，所以

！hasAnimationStarted

将是正确的。非常感谢您的帮助