在 KineticJs 中补间多个 blob

Question

如何在 Kinetic JS 中补间多个 blob？

我可以使用两组点对 blob 进行补间，但除此之外呢？ 到目前为止，这是我所拥有的：

    JS
    setTimeout(function () {
      for (var i = 0; i < blobPoints.length; i++) {
        var tween = new Kinetic.Tween({
          node: blob,
          duration: .5,
          points: blobPoints[i],
          onFinish: function () {
            //this is where I want to call next tween using next set of points
          }
        });
        tween.play();
      };
    }, 300);

在这里完成演示： http://jsfiddle.net/4KLf8/1/

如果您注意到，它会补间到下一组点，但速度非常快，甚至很难看到。我希望它在调用下一组点之前先完成补间。我不确定该怎么做。

Answer 1

function runTween(number) {
    var tween = new Kinetic.Tween({
            node: blob,
            duration: .5,
            points: blobPoints[number],
            onFinish: function () {
                var next = number+ 1;
                if (blobPoints[next]) {
                     runTween(next);
                }
            }
        });
        tween.play();
}
setTimeout(function () {
    runTween(0)
}, 300);

http://jsfiddle.net/4KLf8/3/