幀刷新衝突的超時和requestAnimationFrame

我用這個在一個較低的畫布：幀刷新衝突的超時和requestAnimationFrame

var requestAnimFrame = window.requestAnimationFrame || 
         window.webkitRequestAnimationFrame || 
         window.mozRequestAnimationFrame || 
         window.msRequestAnimationFrame || 
         window.oRequestAnimationFrame || 
         function(callback) { 
         window.setTimeout(callback, 1000/60); 
         };

我用這一個帆布層高於低一個：

function DrawSpawnAnimation() { 


    anim(); 
} 

function anim() { 

     ctxAnimation.drawImage(spriteSheet, ExplodeFrame * 100, 2740,100,100,explodeX,explodeY,100,100); 

     if (ExplodeFrame < 5) { 
      ExplodeFrame++; 
      setTimeout(anim, 500); 

     } 

     //alert("Show current frame of animation"); - this shows the animation works, it just does 
     // not show it one frame per half second. 
    }

我的問題是動畫在屏幕上以毫秒爲單位閃爍。下面的畫布刷新了嗎？

來源

2013-07-04 Sam

以下是如何使用1 RAF ticker爲2個畫布設置動畫。

英國皇家空軍的股票將每秒發射60次。

頂部畫布將每秒動畫30倍（當TopFrameCount下降到0時每隔2幀）。

（當BottomFrameCount下降到0每30幀）

var RAFfps = 60; 

var TopFPS=30; 
var BottomFPS=2; 

var TopFrameCount=(RAFfps/TopFPS)-1; 
var BottomFrameCount=(RAFfps/BottomFPS)-1; 


var counter2fps=0; 

function draw() { 
    setTimeout(function() { 

     requestAnimFrame(draw); 

     // if the top canvas counter has expired, 
     // animate the top canvas 
     if(--TopFrameCount<=0){ 

      // put top canvas drawing stuff here 

      // reset the top counter 
      TopFrameCount==(RAFfps/TopFPS)-1; 
     } 

     // if the bottom canvas counter has expired, 
     // animate the bottom canvas 
     if(--BottomFrameCount<=0){ 

      // put bottom canvas drawing stuff here 

      // reset the top counter 
      BottomFrameCount=(RAFfps/BottomFPS)-1; 
     } 

    }, 1000/fps); 
}

來源

2013-07-04 23:30:43 markE

底帆布將動畫每秒2X是有辦法做到這一點不低帆布附近去，只是有它的上部畫布上運行讓下面的畫布繼續下去，好像什麼都沒有發生？ – Sam

這兩個畫布是否需要動畫？如果是這樣，那麼不行 - 只有1個RAF代碼。你可以有多個setTimeouts，但是這會在性能上倒退一步。你真的可以用RAF +計數器處理多個畫布動畫。 – markE

因爲我有requestAnimFrame（Loop）;對於我的較低畫布，它剛剛獲得需要更長時間等待的頂層會讓我感到困惑。頂層是爆炸動畫，底層只是玩家移動的fps。 – Sam

幀刷新衝突的超時和requestAnimationFrame

回答

相關問題