KineticJS: Play tween after finish other tween

Question

Мне просто нужно одушевить что-то, мне нужно создать несколько анимационных движков для разных объектов, например, пузырьков. Поэтому я просто хочу, чтобы пузырь пузыря на пузырь, я имею в виду начало анимации пузырь номер два, когда анимация пузырь номер один был конец. Я пишу somethink так:

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

Answer 2

Ok благодаря @projeqht я знаю, как сделать это с KineticJS, но я работаю над этим, и у меня есть лучшее решение с ГБПБОМ. Причина с ГБПБ я перекрываться анимацию и многое другое;) так вот код:

//Dodawanie animacje kolejnego bombla do timeline 
     function addAnim(i){ 
      tl.to(bubbleTab[i], 0.5, {kinetic:{scaleX:1, scaleY:1}}, "-=0.45");//-0.45 mean overlap 
     } 

//Dodawanie animacji do timeline 
     for(var i = 0; i < bubbleTab.length; i++) 
     { 
      layer.add(bubbleTab[i]) 
      addAnim(i); 
     } 

tl.play() 

Это просто не так ли? Но вы должны помнить, добавить kineticJS плагин: D i fo