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

我想要的是:

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中看到的那样，它仍然可以一次绘制所有框，或者，如果您还在width动画中放置onComplete属性，则基本上会使整个制表过程停顿一秒钟，然后立即绘制它们。我是否误解了onComplete的用法？

最佳答案

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

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

关于javascript - 使用onComplete依次执行Fabric.js动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25051409/