Tween多个blob在KineticJs [英] Tween multiple blobs in KineticJs

问题描述

如何在Kinetic JS中修改多个blob？

How can I tween multiple blobs in Kinetic JS?

我可以使用两组点来补充一个Blob，但是还有什么呢？
请帮助。这是我到目前为止：

I can tween a blob using two set of points, but what about more than that? Please help. Here's what I have so far:

    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/

如果您注意到，它会修改下一组点，但非常快，它甚至很难看到。我希望它在完成补间之前，它调用下一组点。我不安静肯定如何做到这一点。
我还是新的JS和Kinetic JS所以请裸体与我。谢谢！

If you notice, it tweens to the next set of points but very fast, it's even hard to see. I want it to complete the tween first before it calls the next set of points. I'm not quiet sure how to do that. I'm still pretty new to JS and Kinetic JS so please bare with me. Thank you!

推荐答案

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/

这篇关于Tween多个blob在KineticJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！