window.requestAnimationFrame의 의미와 사용방법

window.requestAnimationFrame의 의미와 사용방법_기본지식

WBOY

풀어 주다： 2016-05-16 17:43:49

원래의

2143명이 탐색했습니다.

다른 사람들의 입자 효과 구현을 보면 다음과 같은 코드가 있을 것입니다:

코드 복사 코드는 다음과 같습니다.

 
window.requestAnimationFrame || (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame 
|| window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
function(callback, element) { 
return window.setTimeout(function() { 
return callback( new Date()); 
}, 1000 / 60) 
}); >
 

이것은 무엇을 의미하며 어떻게 사용됩니까? window.requestAnimationFrame은 수행하려는 애니메이션을 브라우저에 알리고 다음 애니메이션 프레임에서 창을 다시 그리도록 브라우저에 요청합니다. 이 메서드는 브라우저가 다시 그리기 전에 콜백 함수로 호출됩니다.
화면을 새로 고칠 때 이 메서드를 호출하도록 브라우저에 지시합니다.

window.requestAnimationFrame의 과거와 현재: 1990년대 인터넷 광고 시대, 다양한 회전문과 창문에 표시되는 각종 상태 텍스트를 setTimeout을 이용해 구현했습니다. ,

코드 복사 코드는 다음과 같습니다.

(function(){ 
 function update(){ 
setTimeout(update,1000) 
} 
setTimeout(update,1000) 
})() 
(function(){ 
function update() { 
// 
} 
setInterval(update,1000) 
})(); 

 

애니메이션에서 가장 어려운 문제는 지연 문제입니다. 모니터의 경우 초당 60프레임이라고 가정하고 브라우저의 새로 고침 빈도에 따라 애니메이션 시간을 제어하면 좋은 효과가 있습니다. 즉, 17ms, setTimeout(콜백, 1000/60)이지만:
1. 각 브라우저의 실시간 정확도는 다릅니다.
2. 특정 시간이 지나면 브라우저는 UI 스레드가 매우 바쁜 경우 해당 코드 부분을 추가합니다. , 기타 작업이 차단되면 애니메이션의 다음 프레임이 제 시간에 실행되지 않습니다. 장기간 누적누적을 하게 되면 원래의 시점에서 벗어날 수 있으며, 그 오차는 점점 더 커지게 됩니다.

Mozilla의 Robert O'Callahan은 이 문제를 고민하다가 독특한 해결책을 생각해 냈습니다. 그는 CSS 전환 및 애니메이션의 장점은 브라우저가 어떤 애니메이션이 발생할지 알고 있으므로 UI를 새로 고치는 데 올바른 간격을 얻는다는 점을 지적했습니다. JavaScript 애니메이션을 사용하면 브라우저는 애니메이션이 발생하고 있다는 것을 알 수 없습니다. 그의 해결책은 어떤 자바스크립트 코드가 실행되고 있는지 브라우저에 알려주는 mozRequestAnimationFrame() 메서드를 만드는 것이었습니다. 이를 통해 일부 코드를 실행한 후 검색을 최적화할 수 있습니다.

mozRequestAnimationFrame() 메서드는 화면을 다시 그리기 전에 호출되는 함수인 매개변수를 받습니다. 이 함수는 적절한 DOM 스타일 변경을 생성하는 데 사용되며 이러한 변경 사항은 다음 다시 그리기에 사용됩니다. setTimeout()과 같은 방식으로 mozRequestAnimationFrame()에 대한 호출을 연결할 수 있습니다.
window.requestAnimationFrame의 출처입니다.

Mozilla 공식 홈페이지에서 다음 내용을 참고하세요 이 기술의 사양이 안정화되지 않았기 때문에 다양한 브라우저에서 사용할 수 있는 적절한 접두어는 호환성 표를 확인하세요. 실험적인 기술의 동작은 사양 변경에 따라 향후 버전의 브라우저에서 변경될 수 있습니다.
이 기술의 사양은 아직 안정적이지 않으므로 사용할 올바른 접두사는 다양한 브라우저의 호환성 표에 있습니다. 또한 실험 기술의 구문과 동작은 브라우저 사양의 향후 릴리스에서 변경될 수 있습니다.

현재 Android 시스템에서는 지원되지 않으며 애니메이션은 Timeout 설정만 가능합니다.