javascript - KineticJS:完成其他补间后播放补间

Question

我只需要制作一些动画，我需要为几个不同的对象创建几个补间，例如气泡。所以我只想要每个气泡的动画气泡，我的意思是在第一个动画气泡结束时启动第二个动画气泡。我这样写:

var tweens = [];
      for(var i =0; i < bubbleTab.length; i++)
      {
        var tween = new Kinetic.Tween({
          node: bubbleTab[i], 
          x: invisibleBubbles[i].getX(),
          y: invisibleBubbles[i].getY(),
          easing: Kinetic.Easings.BounceEaseOut,
          onFinish: function(){
          tweens[i+1].play();
          },
          duration: 2
        });

        tweens.push(tween);
      }

或者我只是将 onFinish: function() 替换为 playNextTween(i) 并编写方法

function playNextTween(i)
      {

        tweens[i].play();

      }

但还是不行。我不知道我能做什么。我在循环中尝试动画补间，但在循环中所有补间同时执行。

有什么想法吗？我知道 GSAP 和他的 TweenTimeline，但是使用 KineticJS 没有人能从 GSAP 工作中轻松下来

Answer 1

而不是使用

tweens[i+1].play();

使用变量计数器遍历补间数组。例如:

    var rects = layer.get('Rect');
    var rectCount = rects.length;

    var tweens = [];
    var tweenCounter = 1;
    for (var i = 0; i < rectCount; i++) {
        var tween = new Kinetic.Tween({
            node: rects[i],
            duration: 1,
            y: 150,
            onFinish: function() {
                if (tweenCounter !== rectCount) { //Prevent an undefined tween from being played at the end
                    tweens[tweenCounter].play();
                    tweenCounter++;
                }
            }
        });
        tweens.push(tween);
    }

JSFIDDLE