CODEWITHSUNDEEP
javascriptfabricjs
Kenzo
Kenzo

Reputation: 1837

How to animate scaleX and scaleY of a circle on fabricjs canvas

I am trying to animate the scaleX and scaleY of an object(circle in my case) on fabricjs canvas but i have trouble making it to work. Here is my snippet

const canvas = new fabric.Canvas('gameCanvas', {selection: false});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
let circle;
document.addEventListener('DOMContentLoaded', function(){
    circle = makeCircle(52.69, 17.77);
    canvas.add(circle);
});

document.getElementById('animateBtn').addEventListener('click', function(){
    animateCircle(circle, 1);
});


function makeCircle(x, y)
{
    return new fabric.Circle({
        left: x,
        top: y,
        strokeWidth: 2,
        radius: 10,
        fill: 'yellow',
        stroke: '#666',
        selectable: false,
        hoverCursor: 'default',
        hasControls: false,
        hasBorders: false
    });
    
   
}

function animateCircle(circle, dir)
{
   const minScale = 1;
   const maxScale = 2;
        
    return new Promise(resolve =>
    {
        pointA.animate({
            scaleX: dir ? maxScale : minScale,
            scaleY: dir ? maxScale : minScale
        }, {
                easing: fabric.util.ease.easeOutCubic,
                duration: 3000,
                onChange: canvas.renderAll.bind(canvas),
                onComplete: function ()
                {

                    resolve('finished animating the point');
                }


            });
    });

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
<button id="animateBtn">Animate</button>

Upvotes: 3

Views: 735

Answers (1)

obscure
obscure

Reputation: 12891

Inside the animateCircle() function you're trying to apply the transformation to an object called pointA.

Well, this object doesn't exist - the object you want to animate is called circle, which you've defined here:

circle = makeCircle(52.69, 17.77);


var counter;
const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
let circle;
document.addEventListener('DOMContentLoaded', function() {
  circle = makeCircle(52.69, 17.77);
  canvas.add(circle);
});

document.getElementById('animateBtn').addEventListener('click', function() {
  counter = 0;
  animateCircle(circle, 1);
});


function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 10,
    fill: 'yellow',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });


}

function animateCircle(circle, dir) {
  const minScale = 1;
  const maxScale = 2;

  return new Promise(resolve => {
    circle.animate({
      scaleX: dir ? maxScale : minScale,
      scaleY: dir ? maxScale : minScale
    }, {
      easing: fabric.util.ease.easeOutCubic,
      duration: 3000,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: function() {
        if (counter > 4) {
          resolve('finished animating the point');
        } else {
          if (dir == 1)
            animateCircle(circle, 0);
          else
            animateCircle(circle, 1);

        }
        counter++;
      }

    });
  });

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
<button id="animateBtn">Animate</button>

Upvotes: 4

Related Questions