Question

我想要的是：

但我希望每个盒子按顺序弹出而不是一次弹出。我知道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

如果我想，你想一次动画第一个框，那么你应该使用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)

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);
   }
});

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

2 个答案: