setTimeout 또는 setInterval 또는 requestAnimationFrame

모바일 장치 용 캔버스 애니메이션이 포함 된 HTML5 게임의 경우.setTimeout 또는 setInterval 또는 requestAnimationFrame

각 장치와 다른 장치 사이의 속도가 다른 성능 문제가 있습니다.

requestAnimationFrame 기기 속도에 따라 게임의 애니메이션 속도를 높입니다.
setInterval 기기에서 다른 기기까지 지연이 있다는 사실에 충격을 받았습니다.
setTimeout도 캔버스의 그림을 느리게 만듭니다.

모바일 HTML5 게임에 대한 이전 경험이있는 사람은 캔버스에서 애니메이션을 개발하기 위해 3 가지 방법 (또는 가능한 경우 다른 기술)을 사용하는 가장 좋은 방법을 다른 휴대 기기에서 안정적으로 사용할 수 있도록 안내 할 수 있습니까?

출처

2012-12-18 Solieman

가능하면 항상 requestAnimationFrame을 사용하십시오. use a shim for support 일 때가 가장 좋으므로 특정 세부 사항을 다룰 필요가 없습니다.

실제 방법을 사용 했음에도 불구하고 애니메이션이나 게임 로직을 동일한 속도로 수행하려면 물리 기반의 시간 기반 애니메이션과 시간 기반 계산을 사용해야합니다.

출처

2012-12-18 14:49:54

안드로이드 전화 브라우저의 이전 버전을 위해이 기능은 requestAnimationFrame (HTC)를 지원하지 않습니다 ....이 사이트를 시도 http://ie.microsoft.com/testdrive /Graphics/RequestAnimationFrame/Default.html HTC 장치에서 지원되지 않습니다! – Solieman

@Solieman Paul Irish는 requestAnimationFrame과 함께 훌륭한 블로그 게시물을 가지고 있습니다. shim : http://paulirish.com/2011/requestanimationframe-for-smart-animating/ – Jasper

@Solieman 링크 된 코드 (심)가 올바른 사용을 처리합니다. 방법. 'requestAnimationFrame'가 지원되지 않으면 자동으로 다른 메소드 중 하나를 사용합니다. Jasper의 링크에는 더 많은 정보가 있습니다. –

window.requestAnimFrame = function(){ 
    return (
     window.requestAnimationFrame  || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame  || 
     window.msRequestAnimationFrame  || 
     function(/* function */ draw1){ 
      window.setTimeout(draw1, 1000/60); 
     } 
    ); 
}(); 
    window.requestAnimFrame(draw); 
})();

사용하는 모든 경우

출처

2014-01-29 01:09:50

'1000/60'은 무엇을합니까? 왜 단순한 '결과/평가 된'수치가 아닌가? 그 외에도 원래 포스터에 크레딧을주지 않고 ['GitHub'] (https://gist.github.com/mrdoob/838785)의 복사 된 솔루션이 있습니다. –

setTimeout 또는 setInterval 또는 requestAnimationFrame

답변

관련 문제