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

Question

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

我想用 fabric 达到同样的效果，但我似乎可以找到停止动画的方法。例如:

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 , 所以你需要使用最新版本:)