如何停止（以反转）fabricjs 动画

Question

我想创建一个鼠标悬停效果，就像我们过去在 Flash 网站中看到的那样 - 当鼠标悬停在一个元素上时它开始动画，但是如果在动画中间鼠标滚出动画会停止并且跑回来。

我想用织物达到同样的效果，但我似乎可以找到一种方法来停止动画。例如：

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

这将进行动画处理，直到 rect 的 top 值变为 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、which I just fixed，所以你需要使用最新版本:)