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

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 に答える