javascript - 使用 onComplete 按顺序执行 Fabric.js 动画

Question

我想要的是这样的:

http://jsfiddle.net/gJz6C/3/

但我希望每个框按顺序弹出，而不是一次全部弹出。我知道 Fabricjs 有 onComplete 属性。我不太擅长 javascript，我可以在这里找到一个例子:http://fabricjs.com/shadows/ ，对我来说不是那么透明。我认为我有一个聪明的解决方案，有一个绘制单个框的函数，然后调用自身 onComplete，并且如果调用了 10 次则不执行任何操作。这是代码和末尾的 jsfiddle:

var canvas = new fabric.Canvas('canvas1')

function drawbox(seq) {
    if (seq<11) {
        var rect=new fabric.Rect({
            left: seq*25+25,
            top: 10,
            fill: 'red',
            width: 0,
            height: 0,
        });

        canvas.add(rect)

        rect.animate('width',20, {
            onChange:canvas.renderAll.bind(canvas),
            duration: 1000,
            easing: fabric.util.ease.easeOutElastic,
        });

        rect.animate('height',20, {
            onChange:canvas.renderAll.bind(canvas),
            duration: 1000,
            easing: fabric.util.ease.easeOutElastic,
            onComplete: drawbox(seq+1)
        });
    }
}

drawbox(1)

http://jsfiddle.net/bszM5/2/

正如您从 jsfiddle 中看到的，这仍然会一次绘制所有框，或者，如果您还在宽度动画中添加 onComplete 属性，它基本上会使整个选项卡过程停止一秒钟，然后绘制所有框立刻。我是否误解了 onComplete 的使用方式？

Answer 1

问题是您传入 onComplete 的不是函数而是其结果。

rect.animate('height',20, {
   onChange:canvas.renderAll.bind(canvas),
   duration: 1000,
   easing: fabric.util.ease.easeOutElastic,
   onComplete: function() {
     // Here
     drawbox(seq+1);
   }
});