CODEWITHSUNDEEP
fabricjs
esims
esims

Reputation: 420

Fabric.js animate onchange callback not working

The documentation of Fabric.js on animation mentions this onChange callback:

onChange: canvas.renderAll.bind(canvas)

However, when I try to substitute this with a custom function, the animation does not show. See this example; the down animation does not show, only the up animation. What is wrong with this code?

var canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.set({
  hasControls: false,
  selectable: false,
  hoverCursor: 'default',
  originX: 'center',
  originY: 'center'
});

rect1 = new fabric.Rect({
  left: 200,
  top: 0,
  width: 50,
  height: 50,
  fill: 'red',
  opacity: 0
});
canvas.add(rect1);
var button01 = new fabric.Circle({
  left: 20,
  top: 20,
  radius: 10,
  fill: '#c0c0c0',
  strokeWidth: 1,
  stroke: '#808080',
  hoverCursor: 'pointer'
});
canvas.add(button01);
button01.on('mousedown', function(options) {
  animate_down()
});
var text1 = new fabric.Text("Animate", {
  fontFamily: 'Arial',
  fontSize: 12,
  fill: 'black',
  left: 58,
  top: 20,
});
canvas.add(text1);


function animate_down() {
  rect1.animate({
    'top': 300,
    'opacity': 1
  }, {
    onChange: function() {
      canvas.renderAll.bind(canvas)
      /* some other code */
    },
    onComplete: animate_up,
    duration: 2000,
  });
}

function animate_up() {
  rect1.animate({
    'top': 0,
    'opacity': 0
  }, {
    onChange: canvas.renderAll.bind(canvas),
    duration: 2000,
  });
}
#canvas {
	border:1px solid #000000;	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

Upvotes: 2

Views: 826

Answers (1)

Durga
Durga

Reputation: 15614

You need to call canvas.requestRenderAll(); inside your callback. As you are just binding canvas to canvas.renderAll, but never called. Docs

DEMO 

var canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.set({
  hasControls: false,
  selectable: false,
  hoverCursor: 'default',
  originX: 'center',
  originY: 'center'
});

rect1 = new fabric.Rect({
  left: 200,
  top: 0,
  width: 50,
  height: 50,
  fill: 'red',
  opacity: 0
});
canvas.add(rect1);
var button01 = new fabric.Circle({
  left: 20,
  top: 20,
  radius: 10,
  fill: '#c0c0c0',
  strokeWidth: 1,
  stroke: '#808080',
  hoverCursor: 'pointer'
});
canvas.add(button01);
button01.on('mousedown', function(options) {
  animate_down()
});
var text1 = new fabric.Text("Animate", {
  fontFamily: 'Arial',
  fontSize: 12,
  fill: 'black',
  left: 58,
  top: 20,
});
canvas.add(text1);


function animate_down() {
  rect1.animate({
    'top': 300,
    'opacity': 1
  }, {
    onChange: function() {
      canvas.requestRenderAll();
      /* some other code */
    },
    onComplete: animate_up,
    duration: 2000,
  });
}

function animate_up() {
  rect1.animate({
    'top': 0,
    'opacity': 0
  }, {
    onChange: canvas.requestRenderAll.bind(canvas),
    duration: 2000,
  });
}
#canvas {
	border:1px solid #000000;	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

Upvotes: 1

Related Questions