如何停止(为了反转)fabricjs动画

Question

我想创建一个鼠标翻转效果,就像我们以前在flash网站上看到的那样 - 当鼠标滚过一个元素时,它开始动画,但是如果在动画的中间,鼠标滚出动画就会停止并跑回来.

我想用面料达到同样的效果,但我似乎找到了一种停止动画的方法.例如:

rect.animate('top', '200', {
    duration: 1000,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: function() {
      //callback code goes here
    }
  });

这将动画直到遗嘱的top价值rect变为200.有没有办法在此之前停止动画？

Answer 1

您需要指定abort功能.

rect.animate('top', '200', {
    duration: 1000,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: function() {
      //callback code goes here
    },
    abort: function(){
      return someConditionWhichAbortsAnimationWhenItsTrue;
    }
});

唯一的问题是abort没有传入底层fabric.util.animate,我刚修复,所以你需要使用最新版本:)