수색…
통사론
- window.requestAnimationFrame ( 콜백 );
- window.webkitRequestAnimationFrame ( 콜백 );
- window.mozRequestAnimationFrame ( 콜백 );
매개 변수
| 매개 변수 | 세부 |
|---|---|
| 콜백 | "다음 페인트를 위해 애니메이션을 업데이트 할 때 호출 할 함수를 지정하는 매개 변수입니다." ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) |
비고
DOM 요소에 유동적으로 애니메이션을 적용 할 때는 다음 CSS 전환으로 제한됩니다.
- 위치 -
transform: translate (npx, npx); - 스케일 -
transform: scale(n); - 회전 -
transform: rotate(ndeg); - OPACITY -
opacity: 0;
그러나 이것들을 사용하면 애니메이션이 유동적 일 것이라는 보장이 없습니다. 왜냐하면 브라우저가 다른 작업에 관계없이 새로운 paint 사이클을 시작하기 때문입니다. 기본적으로 paint 는 비효율적으로 만들어지며 초당 프레임 수 (FPS)가 저하되기 때문에 애니메이션이 "janky"로 보입니다.
DOM 애니메이션을 부드럽게 유지하려면 requestAnimationFrame을 위의 CSS 전환과 함께 사용해야합니다.
이유는 requestAnimationFrame API가 브라우저가 다음 paint 사이클에서 애니메이션을 발생 시키길 원한다는 것을 브라우저가 알 수 있기 때문입니다. 이는 RAF가 아닌 애니메이션이 호출 될 때 새로운 페인트 사이클을 강제 실행하기 위해 진행되는 것을 방해하는 것이 아닙니다 .
requestAnimationFrame을 사용하여 요소를 페이드 인하십시오.
- jsFiddle보기 : https://jsfiddle.net/HimmatChahal/jb5trg67/
- 복사 + 붙여 넣기 가능한 코드는 다음과 같습니다 .
<html>
<body>
<h1>This will fade in at 60 frames per second (or as close to possible as your hardware allows)</h1>
<script>
// Fade in over 2000 ms = 2 seconds.
var FADE_DURATION = 2.0 * 1000;
// -1 is simply a flag to indicate if we are rendering the very 1st frame
var startTime=-1.0;
// Function to render current frame (whatever frame that may be)
function render(currTime) {
var head1 = document.getElementsByTagName('h1')[0];
// How opaque should head1 be? Its fade started at currTime=0.
// Over FADE_DURATION ms, opacity goes from 0 to 1
var opacity = (currTime/FADE_DURATION);
head1.style.opacity = opacity;
}
// Function to
function eachFrame() {
// Time that animation has been running (in ms)
// Uncomment the console.log function to view how quickly
// the timeRunning updates its value (may affect performance)
var timeRunning = (new Date()).getTime() - startTime;
//console.log('var timeRunning = '+timeRunning+'ms');
if (startTime < 0) {
// This branch: executes for the first frame only.
// it sets the startTime, then renders at currTime = 0.0
startTime = (new Date()).getTime();
render(0.0);
} else if (timeRunning < FADE_DURATION) {
// This branch: renders every frame, other than the 1st frame,
// with the new timeRunning value.
render(timeRunning);
} else {
return;
}
// Now we're done rendering one frame.
// So we make a request to the browser to execute the next
// animation frame, and the browser optimizes the rest.
// This happens very rapidly, as you can see in the console.log();
window.requestAnimationFrame(eachFrame);
};
// start the animation
window.requestAnimationFrame(eachFrame);
</script>
</body>
</html>
애니메이션 취소하기
requestAnimationFrame 대한 호출을 취소하려면 마지막 호출시 리턴 된 ID가 필요합니다. cancelAnimationFrame 사용하는 매개 변수입니다. 다음 예제는 가상 애니메이션을 시작한 후 1 초 후에 일시 정지시킵니다.
// stores the id returned from each call to requestAnimationFrame
var requestId;
// draw something
function draw(timestamp) {
// do some animation
// request next frame
start();
}
// pauses the animation
function pause() {
// pass in the id returned from the last call to requestAnimationFrame
cancelAnimationFrame(requestId);
}
// begin the animation
function start() {
// store the id returned from requestAnimationFrame
requestId = requestAnimationFrame(draw);
}
// begin now
start();
// after a second, pause the animation
setTimeout(pause,1000);
호환성 유지
물론 브라우저 자바 스크립트의 대부분과 마찬가지로 모든 것이 모든 곳에서 동일 할 것이라는 사실에 의지 할 수 없습니다. 이 경우 requestAnimationFrame 은 일부 플랫폼에서 접두어를 가질 수 있으며 webkitRequestAnimationFrame 과 같이 다르게 이름이 지정됩니다. 다행히도, 존재할 수있는 모든 차이를 1 개의 함수로 그룹화하는 정말 쉬운 방법이 있습니다.
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
마지막 옵션 (기존 지원이 발견되지 않을 때 채워짐)은 cancelAnimationFrame 에서 사용할 ID를 반환하지 않습니다. 그러나 이것을 수정 한 효율적인 polyfill 이 있습니다.