캔버스 requestAnimationFrame 일시 중지

Question

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 후 일시 정지 옵션을 추가 할 수 있습니다. 그것을 할 수있는 간단한 방법이 있습니까?

Answer 1

애니메이션의 상태 (일시 중지 또는 일시 중지 해제)를 저장하는 변수를 만들 수 있습니다. 버튼을 클릭 할 때마다 상태를 변경하십시오. 이런 식으로 작동해야합니다 :

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();