Safari 및 requestAnimationFrame은 DOMHighResTimestamp를 가져옵니다. window.performance not available

Question

requestAnimationFrame을 사용하여 애니메이션을 만들었습니다. Windows Chrome 및 IE에서 올바르게 작동합니다. Safari (Safari 6 및 7 테스트)가 작동하지 않습니다. rAF는 Date 타임 스탬프 대신 DOMHighResTimestamp이됩니다. 그게 다 괜찮아요, 좋은, 그리고 내가 예상했던대로, 지금은 사양의 일부입니다. 그러나 찾을 수있는 한 현재 DOMHighResTimestamp (예 : window.performance은 접두사가있는 경우에도 사용할 수 없음)을 얻을 수있는 방법이 없습니다. 따라서 시작 시간을 Date 타임 스탬프로 만들면 rAF 콜백 (매우 작은 음수) 내에서 진행률을 결정할 때 크게 잘못 동작합니다.

사파리에서 this JSBin을 보면, 전혀 애니메이션이 적용되지 않습니다. startTime가 다음 프레임에 time 매개 변수로 설정됩니다 있도록

는 this JBin, 난, 첫 번째 프레임합니다 ( time 매개 변수가 undefined) "를 건너"로 변경했습니다. 작동하는 것처럼 보이지만 프레임을 건너 뛰는 것은 조금은 진절머리 나는 것처럼 보입니다.

window.performance이 부족하면 Safari에서 현재 DOMHighResTimestamp을 얻는 방법이 있습니까? 또는 대안으로 rAF를 일종의 레거시 모드로 강제 실행하여 대신 Date 타임 스탬프를 가져 오게 할 수 있습니까?

사파리가 다른 방식으로는 얻을 수없는 형식으로 매개 변수를 제공하는이 불일치가있는 이유를 아는 사람이 있습니까?

Answer 1

Performance.now()는 현재 권장 사항 일뿐입니다. https://developer.mozilla.org/en-US/docs/Web/API/Performance.now() Safari를 제외한 모든 사람들이 Safari에 내장되어있는 것처럼 공식적으로 생각하기에는 시간 문제라고 생각할 수 있습니다.

그 외에도 이점을 활용하십시오. requestAnimationFrame이 DOMHighResTimestamp를 반환하면 해당 타이밍에 사용합니다. 내가 여기서 무엇을

Game.start = function(timestamp){ 
    if(timestamp){ 
     this.time = timestamp; 
     requestAnimationFrame(Game.loop); 
    }else{ 
     requestAnimationFrame(Game.start); 
    } 
} 

Game.loop = function(timestamp){ 
    Game.tick(timestamp); 
    ... your code 
    requestAnimationFrame(Game.loop); 
} 

Game.tick = function(timestamp) { 
    this.delta  = timestamp - this.time; 
    this.time  = timestamp; 
}; 

은, 루프를 (우리는 유효한 뭔가를 얻을 때까지 우리가하려고 그래서 타임 스탬프가 정의 된 상황으로 실행했습니다) 시작되는 Game.start를 호출합니다. 우리가 기본 시간을 가지면 RAF가 타임 스탬프를 반환 할 것이기 때문에 tickAnimationFrame에 의해 반환 된 타임 스탬프를 전달하는 한 tick.No 또는 performance.now를 호출 할 필요가 없습니다.