畫布requestAnimationFrame暫停

如何暫停使用requestAnimationFrame製作的畫布動畫？我開始動畫這樣的：畫布requestAnimationFrame暫停

代碼：

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

function Start() { 
    Update(); 
    requestAnimFrame(Start); 
} 

Start();

現在我想的keydown後添加暫停選項。有沒有簡單的方法來做到這一點？

來源

2013-05-14 Amay

Ivan Chub解決方案的作品，但瀏覽器將繼續調用requestAnimationFrame回調。爲了避免這種行爲，可以使用[cancelAnimationFrame]（https://developer.mozilla.org/en-US/docs/DOM/window.cancelAnimationFrame）。考慮看看[本文中]發佈的requestAnimationFrame健壯聚合填充（http://paulirish.com/2011/requestanimationframe-for-smart-animating/）。 –

不應在'Update（）'中調用requestAnimationFrame？否則，你可以調用一個除了調用另一個函數以外別的功能。 –

你可以做的是創建一個變量來存儲動畫的狀態：已暫停或未暫停。每次點擊一個按鈕時更改該狀態。像這樣的東西應該工作：

var isPaused = false; 

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

function Start() { 
    if (isPaused) { 
     Update(); 
    } 

    requestAnimFrame(Start); 
} 

window.onkeydown = function() { 
    isPaused = !isPaused; // flips the pause state 
}; 

Start();

來源

2013-05-15 00:42:27

畫布requestAnimationFrame暫停

回答

相關問題