JS Fabric: How to animate the top and left position of a triangle at the same time? + animated error

Question

My question seems relatively easy, but after a couple of hours of googling, I no longer have information about this.

Basically, I would like to use the animation function to move the center of two triangles (or one for starters) around another triangle. I suppose that it should present the animation in three stages, but I cannot get something to work.

Please note that this is the first time I use it, I am afraid it may seem obvious to some of you.

Also, I'm not sure if I set things up correctly (based on an example and only animation of one property), since the animation does not want to run: /

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);
}

Does anyone have an idea why it is not working?

thank

Answer 1

Fabric, , , , .animate() , :

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

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

jsbin. Fabric docs, onChange . , requestAnimationFrame

Answer 2

:

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