2

バージョン 4.5.1 の時点で、古い Transition クラスは廃止され、「KineticJS はシームレスに統合される GreenSock アニメーション プラットフォームを推奨しています」。

古い Transition クラスに大きく依存していた KineticJS を使用してキャンバス ゲームを作成していますが、GSAP の機能を読んで、アップグレードしたいと思っています。

私の問題は、最も単純な TweenLite 関数でさえ使用しようとすると、キャンバスによって完全に無視されることです。他の誰かが問題を報告しているのを見たことがないので、明らかな何かが欠けているに違いないと思います。

TweenLite と TimelineLite を Kinetic で動作させる方法を知っている人はいますか? どんな助けでも大歓迎です！

（私が現在持っているもののコードサンプルを以下に含めます）。

   //Basic Kinetic setup: 

var stage = new Kinetic.Stage({
    container: 'container',
    width: 800,
    height: 600
  });

var layer1 = new Kinetic.Layer();

layer1.add(levelOne);
              .
              .
    //The KineticJS shape I'm trying to tween   

    var stone3 = new Kinetic.Circle({
        x: 664,
        y: 528,
        radius: 10,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });

              .
              .

     var levelOne = new Kinetic.Group();
     levelOne.add(stone3);

              .
              .

     TweenLite.to(stone3, 2, {top:"300"});  //has absolutely no effect

私は使用しています

 <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

GSAPをインポートします。

4

2 に答える 2

2

質問は少し古いですが、同じ問題が発生したばかりです。答えは簡単です。Gasp はメソッドとプロパティをサポートしています。何を使用するかを自動的に決定します。

kineticjs オブジェクトを操作するには、使用するセッターを指定するだけで、オブジェクトを描画することを忘れないでください。そのために onUpdate コールバックを使用できます。

TweenLite.to(obj, 2 { setX : 300
                      onUpdate : function () {
                                    obj.getLayer().draw(); }})
于 2013-10-19T13:24:42.477 に答える
2

GSAP の伝統は、私にとってもまったくうまくいきませんでした。Eric は新しい Kinetic.Tween クラスをバージョン 4.5.2 (4.5.1 にもありましたが、ステージ上のトゥイーンは使用できませんでした) の KineticJS でプッシュしたので、単純なトランジションにはこのクラスを使用することをお勧めします。

Kinetic.Tween クラスを使用したstone3-shape の例:

new Kinetic.Tween({
        node: stone3,
        y: 300,
        /* Eventual easings
        *  duration: 0.5,
        *  easing: Kinetic.Easings.EaseInOut
        */
}).play();
于 2013-05-29T10:01:33.863 に答える