如何停止（为了反转）fabricjs动画

I want to create a mouse rollover effect, like we used to see in flash websites - when the mouse rolls over an element it begins to animate, but if in the middle of the anim the mouse rolls out the animation would stop and run back.

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

I would like to achieve the same effect with fabric, but I can seem to find a way to stop the animation. For example:

我想用Fabric实现同样的效果,但我似乎找到了一种停止动画的方法。例如:

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

This will animate until the top value of the rect will become 200. Is there a way to stop animation before that?

这将动画直到rect的最高值变为200.有没有办法在此之前停止动画?

1 个解决方案

#1

You need to specify abort function.

您需要指定中止功能。

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

The only problem is that abort was not passed in to the underlying fabric.util.animate, which I just fixed, so you'll need to use latest version :)

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

#1