javascript - How to stop (in order to reverse) a fabricjs animation - Stack Overflow

admin管理员组

文章数量:1401133

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.

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

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 bee 200. Is there a way to stop animation before that?

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.

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

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 bee 200. Is there a way to stop animation before that?

• javascript
• animation
• fabricjs

Share Improve this question Follow edited Jul 29, 2013 at 22:13 Mohsenme 1,0721010 silver badges2020 bronze badges asked Jul 29, 2013 at 20:31 MeLightMeLight 5,57344 gold badges4747 silver badges7070 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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 :)

本文标签： javascriptHow to stop (in order to reverse) a fabricjs animationStack Overflow