메인 애니메이션 루프 내에서 5 초 동안 다른 그리기 루프를 실행 하시겠습니까?

Question

나는 requestAnimationFrame을 사용하는 애니메이션() 루프()와 "간단한"게임이 있습니다

function animate(currentTime) { 
    if(playGame) { 
    requestAnimationFrame(animate); 
    } 

    if(isCollide) { 
    endTime = currentTime + 5000; 
    drawCollision(currentTime); 
    } 

} 

내가 5 초 동안 drawCollision() 코드를 실행하고 싶은, 그래서 이런 짓을 :

function drawCollision(currentTime) { 

    if(playCollide) { 
    requestAnimationFrame(drawCollision); 
    } 

    if(currentTime < endTime) { 
    drawImage(image, x, y, height, width, rotation); 
    } else { 
    playCollide = false; 
    } 

} 

그러나 두 개의 rAF 호출이 동시에 실행되는 것 같습니다. 또는 적어도 drawCollision() 호출 후 코드는 drawCollision이 실행되는 동안 실행됩니다.

Answer 1

좋아요, 내 drawCollision() 코드를 호출하기 전에 cancelAnimationFrame(animate)을 호출해야했습니다. drawCollision 내부의 if 루프에 대한 내 '게임 끝'코드도 이동했습니다. http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

:

cancelAnimationFrame polyFill는 영국 공군에 포함되어에서 발견