requestAnimationFrame을 사용하는 방법은 무엇입니까?

Question

저는 애니메이션을 처음 접했지만 최근에 setTimeout을 사용하여 애니메이션을 만들었습니다. FPS가 너무 낮았으므로이 link에 설명 된 requestAnimationFrame을 사용하는 해결책을 찾았습니다.

지금까지, 내 ​​코드입니다 : 이것은 첫 번째 프레임 동안 중지

//shim layer with setTimeout fallback 
    window.requestAnimFrame = (function(){ 
     return 
      window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(/* function */ callback){ 
       window.setTimeout(callback, 1000/60); 
      }; 
    })(); 
    (function animloop(){ 
     //Get metrics 
     var leftCurveEndX = finalLeft - initialLeft; 
     var leftCurveEndY = finalTop + finalHeight - initialTop; 
     var rightCurveEndX = finalLeft + finalWidth - initialLeft - initialWidth; 
     var rightCurveEndY = leftCurveEndY; 

     chopElement(0, 0, 0, 0, leftCurveEndX, leftCurveEndY, rightCurveEndX, rightCurveEndY);//Creates a new frame 
     requestAnimFrame(animloop); 
    })(); 

. chopElement 함수에 requestAnimFrame(animloop); 콜백 함수가 있습니다.

또한이 API를 사용하는 데 대한 자세한 지침이 있습니까?

Answer 1

경고! 이 질문은 최선의 방법이 아닙니다.requestAnimFrame. 당신이 그것을 찾고 있다면,이 페이지에서 다른 대답으로 이동하십시오.

---

당신은 자동 세미콜론 삽입의 속임수를 받았습니다. 이것을 시도하십시오 :

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

자바 스크립트는 자동으로 return 문 뒤에 세미콜론을 넣습니다. 이것은 newline이 나오고 다음 줄이 유효한 표현식이기 때문에이 작업을 수행합니다.

이

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

이 코드는 return 문 뒤에있는 코드를 실행 결코 undefined 반환되지 않으며 :에 사실 그것은 번역됩니다. 따라서 window.requestAnimFrame은 undefined입니다. animloop에서 호출하면 javascript에서 오류가 발생하고 실행이 중지됩니다. 표현식을 괄호로 묶어 문제를 해결할 수 있습니다.

Chrome 개발자 도구 또는 방화 광을 사용하여 자바 스크립트 실행을 검사하는 것이 좋습니다. 이러한 도구를 사용하면 오류를 보았을 것입니다. 당신은 (내가 크롬을 믿고있어) 다음과 같이 디버깅 가야한다 :

1. 코드를 실행
2. 열기 개발자 도구 (예기치 않은 결과를) (오른쪽 클릭 -> 요소 검사) 당신은 볼 것이다 window.requestAnimFrame를 누르십시오, 당신은 것입니다 입력 : 오른쪽에있는 상태 표시 줄에 빨간색 x 당신은 콘솔에서

   Uncaught TypeError: Property 'requestAnimFrame' of object [object DOMWindow] is not a function

3. 유형을 볼 수
5. 열기 콘솔 탭 (이 실행에 오류가 있음을 의미) 그것을 보시려면입니다.3210. 지금까지이 문제는 실제로 requestAnimationFrame과 관련이 없으며 코드의 첫 부분에 집중해야한다는 것을 알고 있습니다.
6. 이제 코드를 반환하는 부분까지 코드를 좁히는 문제가 있습니다. 이것은 어려운 부분이며 여전히이 지점에서 찾지 못하면 더 많은 도움을 얻기 위해 인터넷을 이용할 수 있습니다.

this video 또한 자바 스크립트 작성에 대한 우수 사례를 살펴보고 악의 자동 세미콜론 삽입에 대해서도 언급합니다.

Answer 2

/* 
    Provides requestAnimationFrame in a cross browser way. 
    http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 
*/ 

if (!window.requestAnimationFrame) { 

    window.requestAnimationFrame = (function() { 

     return window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127) 
     window.oRequestAnimationFrame || 
      window.msRequestAnimationFrame || 
      function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 

       window.setTimeout(callback, 1000/60); 

     }; 

    })(); 

} 

animate(); 

function animate() { 
    requestAnimationFrame(animate); 
    draw(); 
} 

function draw() { 
    // Put your code here 
} 

아래의 jsfiddle 예제를 살펴보십시오. 그것은 내가 의미하는 것을 분명히 보여줍니다. 이 도움이

http://jsfiddle.net/XQpzU/4358/light/

희망! 이벤트가 화면에 변화를 칠 수있는 것보다 더 많은 시간을 해고되지 않도록

Answer 3

"스마트 조절 : 왜 당신이 'JQuery와'로이 태그 않았다

var requestFrame = window.requestAnimationFrame || 
 
        window.webkitRequestAnimationFrame || 
 
        // polyfill - throttle fall-back for unsupported browsers 
 
        (function() { 
 
         var throttle = false, 
 
          FPS = 1000/60; // 60fps (in ms) 
 
     
 
         return function(CB) { 
 
         if(throttle) return; 
 
         throttle = true; 
 
         setTimeout(function(){ throttle = false }, FPS); 
 
         CB(); // do your thing 
 
         } 
 
        })(); 
 

 
///////////////////////////// 
 
// use case: 
 

 
function doSomething() { 
 
    console.log('fired'); 
 
} 
 

 
window.onscroll = function() { 
 
    requestFrame(doSomething); 
 
};

html, body{ height:300%; } 
 
body::before{ content:'scroll here'; position:fixed; font:2em Arial; }