4

My question seems relatively easy, but after a couple of hours googling I don't get any more info about that.

Basically I would like to use the animate function to move the center of two triangles (or one to start with) around another triangle. I guess it should represents an animation in three steps but I can't get something working.

Note that it's the first time I use it, I'm afraid it may sound obvious for some of you.

Also I am not sure I have set up things properly (based on example and only animating one property) as the animation doesn't want to fire up :/

function createTriangle() {
  var canvas2 = new fabric.Canvas('myCanvas');

  var triangle = new fabric.Triangle({
    width: 300, height: 300, fill: 'red', left: 30, top: 0
  });

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

  canvas2.add(triangle);
}

Anyone has an idea why it is not working?

Thanks

daneczech
  • 655
  • 1
  • 9
  • 20

2 Answers2

6

Ease example: 

  triangle.animate({left: 100, top: 100 }, {
      duration: 1000,
      onChange: canvas.renderAll.bind(canvas),
   });
dmitri
  • 460
  • 5
  • 11
4

I'm not a Fabric user, so maybe there's a better way, but the call to .animate() is non-blocking, so you can just request animations for two properties in a row:

triangle.animate('top', '+=100', {
  duration: 1000,
  onChange: canvas.renderAll.bind(canvas),
});

triangle.animate('left', '+=100', {
  duration: 1000,
  onChange: canvas.renderAll.bind(canvas),
});

Here is the demo on jsbin. I read on the Fabric docs that this way of using onChange can lead to poor perfomance. If that's your case, you can use requestAnimationFrame, or code your own loop

Raffaele
  • 20,627
  • 6
  • 47
  • 86
  • Thank you for these explanation. However it is weird, as soon as I want to fire the event on load and not with an onclick buttonit doesn't work.. I'm confused. Does that mean I have to fire the animation through an onClick event? Your example is working fine though.. But unfortunately not really solving my problem. Thanks anyway – daneczech Jun 06 '14 at 01:23
  • actually I have been looking on processing JS but it looks a pain to achieve smth like that with it.. – daneczech Jun 06 '14 at 01:24
  • @user1880789 just schedule your event to run **onDomLoaded** ;) Fabric needs the Canvas element to be in the DOM – Raffaele Jun 06 '14 at 01:26
  • You didn't describe your problem, didn't provide a sandbox to reproduce it, and just complain about your code not working as you want. It's not how StackOverflow works: you post a problem, we solve it and then we're done. It's up to you to understand the answer and write the code for your projects, because it's your job. It's unfair to not understand/accept the provided answer and instead just asking for the code – Raffaele Jun 06 '14 at 01:51
  • Aouch... I've just seen what's going wrong. Obvious :/ Definitely time to sleep for me. Thanks dude. – daneczech Jun 06 '14 at 02:13