KineticJS和Tween時間軸，與GSAP JS

整合，自4.5.1版起，舊的Transition類已經停用，「KineticJS推薦無縫集成的GreenSock動畫平臺」。KineticJS和Tween時間軸，與GSAP JS

我正在寫一個使用KineticJS的帆布遊戲，它非常依賴那個舊的Transition類，但已經閱讀了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。

來源

2013-05-27 bamboo10

是不是''''''參考的''''''''而不是'頂部'和'左'的座標？ – ahren

的問題是有點老了，但我只是有同樣的問題。答案很簡單。 gasp支持方法和屬性。它會自動確定使用什麼：

要操作kineticjs對象，只需告訴它使用什麼設置器，並且不要忘記繪製對象。你可以使用onUpdate回調：

TweenLite.to(obj, 2 { setX : 300 
         onUpdate : function() { 
            obj.getLayer().draw(); }})

來源

2013-10-19 13:24:42 user1283078

GSAP trasitions從來沒有爲我工作真的。正如Eric將Kinetic.Tween-class推向KineticJS的4.5.2版本（4.5.1也有，但在舞臺上的補間是不可能的），我會推薦使用這個類來進行簡單的轉換。

實例爲您stone3形狀與Kinetic.Tween類：

new Kinetic.Tween({ 
     node: stone3, 
     y: 300, 
     /* Eventual easings 
     * duration: 0.5, 
     * easing: Kinetic.Easings.EaseInOut 
     */ 
}).play();

來源

2013-05-29 10:01:33 irie

我嘗試過，但後來我只有一次玩遊戲的問題（說如果它是由一個特定的畫布區域中的鼠標觸發的，它將首次播放，但當我再次單擊時，它並未顯示整個過渡，只是結束位置），所以似乎並沒有工作:( – bamboo10

你可以發佈你的代碼與Kinetic.Tween類的jsFiddle，因爲沒有顯示過渡的行爲肯定是不正常的，它會更容易幫助你... – irie

KineticJS和Tween時間軸，與GSAP JS

回答

相關問題