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

Answer 2

好的，感谢@projeqht我知道如何使用KineticJS，但我正在努力，我有更好的解决方案与GASP。 GASP的原因我可以重叠动画等等;）所以这里是代码：

//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

KineticJS：完成其他补间后播放补间

2 个答案: