問題循環一個JavaScript動畫：Jsanim

我使用jsAnim一些簡單的動畫。問題循環一個JavaScript動畫：Jsanim

我已經創建了一個簡單的JavaScript功能 -

<script type="text/javascript"> 
var man = new jsAnimManager(); 

function animation1() { 
    shroom = document.getElementById("mushroom2"); 

    man.registerPosition("mushroom2"); 

    var monster = $("#mushroom2"); 
var offset = monster.offset(); 
var l=offset.left; 
var r= offset.top; 


    shroom.setPosition(l,r); 

    var anim = man.createAnimObject("mushroom2"); 

    anim.add({property: Prop.position, to: new Pos(l+100,r+400), 
      duration: 1000,ease:jsAnimEase.parabolicNeg }); 
} 

</script>

我已經類似地定義另一個animation2（）函數。

該動畫獨立運行良好。但是我試圖在for循環中循環這個動畫。

for(var i=1, l=data.length; i < 6 ; i++) 
      { 

        if ((i==1)||(i==3)) animation1(); else animation2(); 


      }

但我觀察到動畫只發生在i = 5（即在循環停止執行後）。沒有i = 1-4的動畫。

這是一些線程問題？我是否需要使用某種形式的線程或睡眠者或其他？

請幫忙。

我希望讓對象分階段走幾條不同的路。

來源

2011-10-23 geeky_monster

確切的問題是什麼？你能演一個小提琴嗎？你已經嘗試添加'onComplete：function（）{animation1（）;}'？ –

所有的動畫功能幾乎是瞬間執行的。由於jsanim庫沒有隊列功能，因此在這種情況下您將看到的唯一動畫是最後一個（因爲每次執行下一個動畫時，最後一個動畫都會中止）。

但它確實有一個onComplete回調處理程序，所以一個隊列很容易實現。你需要一個隊列數組，它是可見的所有功能：

var animationQueue = [];

然後改變你的for循環添加功能到隊列，而不是執行它們：

for(var i=1; i<6; i++) { 
    if (i%2==1) //if i is odd number 
     animationQueue .push(animation1); 
    else   //else i is even number 
     animationQueue .push(animation2); 
} 
nextAnimation();

還要注意，我用i%2==1。當你說if(i==1 || i==3)時，我假設你想要奇數。該nextAnimation（）函數可以是這個樣子：

function nextAnimation() { 
    if(animationQueue.length) 
     animationQueue.shift()(); 
}

最後，您需要在您的通話添加onComplete選項動畫：

anim.add({ 
    property: Prop.position, 
    to: new Pos(l+100,r+400), 
    duration: 1000, 
    ease:jsAnimEase.parabolicNeg, 
    onComplete: nextAnimation 
});

希望得到您正軌！

來源

2011-10-23 10:30:51 Donamite

太棒了。謝謝。我會試試這個。 –

是否有任何其他的JavaScript庫，你更喜歡哪些，有更多的功能和易於使用的2D動畫？ –

有幾個很好的（Jsanim是其中之一），它取決於你想要做什麼樣的動畫，但我也喜歡$ fx動畫庫（http://fx.inetcat.com/ ）。它非常易於使用，而且非常小（4Kb）。像Jsanim一樣，它不需要任何其他庫（如jQuery或MooTools）。如果你已經在使用jQuery，你也可以用它來做動畫，但如果動畫是你需要的，我不會推薦它。如果您想要更詳細的答案，請考慮開始一個新問題，以便獲得更多意見。希望有所幫助！ – Donamite

問題循環一個JavaScript動畫：Jsanim

回答

相關問題