RequestAnimationFrame - DOMHighResTimeStamp 매개 변수를 사용해야합니까?

Question

나는 requestAnimationFrame을 사용하는 방법을 연구하려고 노력 해왔고, 결국 혼란스러워졌습니다. 당신은 당신이 requestAnimationFrame(step) 콜 '단계'라는 애니메이션 기능이있는 경우 Mozilla에 따르면

는 step 밀리 초 단위의 숫자, DOMHighResTimeStamp 인수 인 인수를 받아들입니다.

그러나 아직까지도 requestAnimationFrame을 사용하는 방법을 온라인에서 살펴본 모든 예에서는이 인수를 사용하지 않습니다. 일부 예제에서는 step 함수가 초당 60 회 실행될 것으로 가정 할 수 있으므로 어떤 time 개념도 전혀 사용하지 않는다고 가정합니다. 다른 사람들은 new Date();을 사용하여 인수와 별도로 "밀리 초 수"를 얻습니다.이 예제를 수정하여 인수를 사용하기는 쉽습니다.

함수가 초당 60 회 실행된다고 가정해도 괜찮습니까? 나 한테 현혹 된 것 같아. 모질라는 "콜백 횟수는 일반적으로 초당 60 회이지만 일반적으로 W3C 권장 사항 인"에 따라 대부분의 웹 브라우저에서 디스플레이 새로 고침 빈도와 일치합니다. 따라서이 가정에 만족하지 않습니다. 사람들이 인수를 사용하는 대신 자신의 new Date() 밀리 초를 얻는 방법을 사용하는 이유가 있습니까?

Answer 1

글쎄, 이전에 몇 가지 다른 답변과 의견이 있었지만 어떤 이유로 사람들이 제거했습니다. 나는 적절 타임 스탬프를 사용하는 방법을 알아내는 결국 및 답변 here

내가 통해 답을 복사 할 수 있습니다 게시 :

---

내가 당신을 위해 대답을 발견했다고 생각합니다. 그것은 this library

첫째을 기반으로, 난 그냥이

function startAnimation(domEl){ 
    var stop = false; 

    // animating x (margin-left) from 20 to 300, for example 
    var startx = 20; 
    var destx = 300; 
    var duration = 1000; 
    var start = null; 
    var end = null; 

    function startAnim(timeStamp) { 
     start = timeStamp; 
     end = start + duration; 
     draw(timeStamp); 
    } 

    function draw(now) { 
     if (stop) return; 
     if (now - start >= duration) stop = true; 
     var p = (now - start)/duration; 
     val = inOutQuad(p); 
     var x = startx + (destx - startx) * val; 
     $(domEl).css('margin-left', `${x}px`); 
     requestAnimationFrame(draw); 
    } 

    requestAnimationFrame(startAnim); 
} 

I 같은 수정 된 예제 코드의 형태로 뭔가를 사용하는 것이,

function inOutQuad(n){ 
    n *= 2; 
    if (n < 1) return 0.5 * n * n; 
    return - 0.5 * (--n * (n - 2) - 1); 
}; 

그런 다음 해당 사이트에서 함수를 잡아 것 '정지'계산 방식이 변경 될 수 있습니다. destx 등에서 끝나는 것을 확인하기 위해 글을 쓸 수도 있지만 기본 형식입니다.

표시된 것을 this jsfiddle

나는 실제로이 것을 자랑스러워합니다. 나는 이것을 잠시 동안 알고 싶었다. 다행이었습니다.