requestAnimationFrame/cancelAnimationFrame의 올바른 사용

Question

requestAnimationFrame API으로 작업하는 동안 문제가 발생했습니다. 구조체 내가 사용하는 것은 잘못되었지만 나에게 논리적 인 것처럼 보일 수 있습니다.

은 내가 기본적으로 할 것은 무한 떨어지는 효과를 위해 아주 쉬운 배경 위치 조작입니다 : 사실

(이 버전은 간단하지만, 실증한다)

cache.mechanism.snowFall = function(){ 

    cache.snow.position.y ++; 
    if(cache.snow.position.y > cache.viewport.height){ 
     cache.snow.position.y -= cache.viewport.height; 
    } 
    cache.snow.elem.style.backgroundPosition = "0px " + cache.snow.position.y + "px"; 

    requestAnimationFrame(cache.mechanism.snowFall); 

}; 

, 그것은 배경 위치 x 1 픽셀 이동 모든 애니메이션 프레임마다 낮아집니다. (재설정 할 때이 켜지지 높은 페인트 시간을 방지 할 수있는, 그리고 FPS 손실)

내가 호출하여 초기화 :

cache.mechanism.snowFall(); 

그래서, 그것은 매우 높은 FPS로, 잘 실행하지만 수 없습니다 그것을 막을 수 있습니다.

cancelAnimationFrame(cache.mechanism.snowFall); 

- 아무것도 표시하지 않고 정의되지 않은 값을 반환합니다.

Answer 1

cancelAnimationFrame으로 취소하려는 requestAnimationFrame의 ID를 보내야합니다. 이 id는 원래 requestAnimationFrame의 리턴 값입니다. 당신이 중지 플래그를 사용할 수, requestAnimationFrame 루프를 계속 운영하기 위해 호출해야하기 때문에,

cancelAnimationFrame(id); 

또는 :

var id=requestAnimationFrame(cache.mechanism.snowFall); 

그리고 그 요청을 취소 할 수 :

그래서 하나 개의 애니메이션 루프를 요청 애니메이션 :

// set an external flag to allow animations to continue 
var continueAnimating=true; 

function animate(){ 

    if(continueAnimating){ 
     // when continueAnimating is false, this new request will not occur 
     // & animating stops 
     requestAnimationFrame(animate); 
    } 
    ... 
} 

// To turn off animation 
continueAnimating=false; 
}