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

Question

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

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

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

这将进行动画处理，直到 will 的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的底层，所以你需要使用最新版本:)