1

我只需要动画一些东西，我需要为几个不同的对象创建一些补间，例如气泡。所以我只想为每个气泡设置动画气泡，我的意思是当动画气泡编号 1 结束时开始动画气泡编号 2。我写一些这样的想法：

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 的工作并不容易

4

2 回答 2

3

而不是使用

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

于 2013-09-16T13:49:43.413 回答
0

好的，感谢@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

于 2013-09-17T07:01:43.867 回答