在KineticJs中補間多個斑點

Question

如何在Kinetic JS中補間多個斑點？

我可以使用兩組點對補間進行補間，但是還有更多呢？ 這是我到目前為止的內容：

    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/