Fabric.js动画onchange回调无法正常工作

Question

Fabric.js动画的文档提到了这个onChange回调：

onChange: canvas.renderAll.bind(canvas)

但是，当我尝试用自定义函数替换它时，动画不会显示。看这个例子;向下动画不显示，只有向上动画。这段代码有什么问题？

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>

Answer 1

你需要在回调中调用canvas.requestRenderAll();。因为你只是将canvas绑定到canvas.renderAll，但从未打过电话。 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>