使用onComplete依次执行Fabric.js动画

Question

我想要的是这个：

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

但我希望每个盒子依次弹出，而不是一次性全部弹出。 我知道fabricjs有onComplete属性来实现这一点。 我不太擅长javascript，我能找到的一个例子在这里：http://fabricjs.com/shadows/，对我来说并不是那么透明。 不过，我认为我有一个聪明的解决方案，即编写一个函数来绘制单个框，然后在完成时调用自身，并且如果已经被调用了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？

- AustinC

Answer 1

如果我猜得没错的话，您想一个接一个地动画显示盒子，那么您应该使用setTimeout函数。

          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)
        setTimeout(function(){
        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)
        });
       },1000);     
    }
}

drawbox(1)

- Sandeep Pal

Answer 2

问题在于您传递给 onComplete 的不是函数，而是其结果。

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

- Lyubimov Roman

---

Sandeep的答案也是正确的，但这个答案更接近我的原始意图。谢谢。 - AustinC