画布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暂停

回答

相关问题