循環動態JavaScript轉換一個接一個，而不是所有的一次

我想在html5畫布中一個接一個地排列幾個轉換。循環轉換函數立即調用所有轉換。我不知道是否回調將做到這一點，如果迭代次數超過100 我想要做這樣的事情： -循環動態JavaScript轉換一個接一個，而不是所有的一次

爲（i = 0;我< 10;我++）{ move(circle,Math.floor(Math.random()*1000),400); }

移動是我定義的函數，它使一些transitions.its工作得很好。

在這裏，我希望圓形在每次迭代中改變其位置，但只改變其位置一次。

2013-02-27 Ankur rana

如果你想在同一時間移動多個對象，你需要計算每一個動作，並設置位置，並繪製一次，而不是使用過渡或動畫。如果您發佈您的示例，它將有助於解決您的問題。 – allenhwkim 2013-02-27 20:39:49

您的方法無法正常工作的原因是瀏覽器沒有機會在繪畫步驟之間重新繪製畫布。傳統上，這是通過渲染單個步驟（幀）然後等待少量時間來解決的，但是有一個新功能available in recent browsers: requestAnimationFrame正在解決這個確切問題。

檢查Animating with javascript: from setInterval to requestAnimationFrame和requestAnimationFrame for Smart Animating（它們還顯示如何在不支持的瀏覽器中爲動畫製作墊片）。

（我不知道kinetic.js，但甚至有可能是在它這樣的墊片直接支持）。

來源

2013-02-27 10:56:48 unthought

感謝您的解決方案，但他們都沒有幫助我。也許我無法解釋我的問題。 – 2013-02-27 18:34:21

終於做到了！請看這裏http://goo.gl/7TbWP – 2013-02-28 18:29:29

http://goo.gl/7TbWP – 2013-02-28 18:29:53

你可以這樣做：

var i=10; 
var interval = window.setInterval(function(){ 
    move(circle,Math.floor(Math.random()*1000), 400); 
    console.log(i); 
    if(!--i) { 
     window.clearInterval(interval); 
    } 
}, 400); // wait 400 msecs between calls

或者，如果您的移動功能願意來調用回調函數，一旦過渡完成：

var i=10; 
var callback = function(){ 
    if(i--){ 
     move(circle,Math.floor(Math.random()*1000),400, callback); 
    } 
} 
callback();

來源

2013-02-27 10:57:53

感謝您的回答，但沒有人幫助我，也許我無法解釋我的問題。 '' 反-1 = {Y：0，X：800，持續時間：2};'' TRANS2 = {Y：200，X：0，持續時間：2};' '磁盤[0] .transitionTo （trans1）;' 'disc [0] .transitionTo（trans2）;' ' 此代碼直接將光盤轉換爲（0,200），而不是先移至（800,0），然後移至（0,200）。任何方式我可以做到這一點，而不使用回調函數?? @David McMullin @unthought – 2013-02-27 19:08:32

Javascript是單線程的，嘗試暫停執行等待動畫結束是一個可怕的想法，因爲對於那些200 msecs沒有其他事情會發生，沒有滾動，沒有點擊，什麼都沒有。因此，是的，你必須使用某種回調/分離功能。 – 2013-02-27 20:28:29

呀ofcource。它不是問題的解決方案，而是一種技巧。我首先將指令存儲在單獨的數組（transitionsequence）中，並使用遞歸回調（Callback）（動力學中定義的回調）。它不是非常有效的方法，但只要解決了問題，我都不在乎。 :)

`函數MOVE2（I，限制）{

var obj = transitionsequence[i].object; 
    obj.transitionTo({ 
     y:100, 
     duration: 0.3, 
     callback : function() 
     { 
     obj.transitionTo({ 
      x:transitionsequence[i].x, 
      duration:0.3, 
      callback: function() 
      { 
      obj.transitionTo({ 
       y:transitionsequence[i].y, 
       duration:0.3, 
       callback: function() 
       { 
       if(i < limit) 
       move2(i+1 , limit); 
       } 
      }); 

      } 
     }); 
     }       
    }); 

    };`

來源

2013-03-02 16:14:40

循環動態JavaScript轉換一個接一個，而不是所有的一次

回答

相關問題