📌 window.requestAnimationFrame() ?
브라우저 에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 한다.
이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받는다.
- 대표적으로 많이 쓰이는 곳은 canvas 에서 많이 쓰인다. canvas에서 애니메이션 구현을 할때는 빠르게 반복을 하면서 화면을 구현하기엔 requestAnimationFrame이 적합하다.
- 구문
window.requestAnimationFrame(callback);- 예시
img 가 로켓이라고 가정해보자 !
<body>
<img class="ilbuni" src="rocket" alt="로켓">
<div class="value"> requestAnimationFrame </div>
<script>
const ilbuni = document.querySelector('.ilbuni'); //로켓 이미지 지정
const value = document.querySelector('.value');
let yPos = 0;
let rafId;
function render(){
value.innerHTML = yPos; // 숫자 0
ilbuni.style.transform = `translateY(${-yPos})`;
//이미지 css style translateY 를 yPos와 같게 지정
yPos += 10; //숫자 범위를 크게 수정
rafId = requestAnimationFrame(render);
console.log(rafId); //결과 => 숫자의형태로 1씩계속 증가
}
render();
window.addEventlistener('click',() =>{ //화면의 아무곳이나 클릭했을때 멈출수 있도록 설정
cancelAnimationFrame(rafId); //매개변수 인자로 rafId를 넣는다
})
</script>
</body>만약 클릭하면 멈추는게 아니라 숫자가 500보다 클 경우 자동으로 멈추게 하고싶을때는
<body>
<img class="ilbuni" src="rocket" alt="로켓">
<div class="value"> requestAnimationFrame </div>
<script>
const ilbuni = document.querySelector('.ilbuni'); //로켓 이미지 지정
const value = document.querySelector('.value');
let yPos = 0;
let rafId;
function render(){
value.innerHTML = yPos; // 숫자 0
ilbuni.style.transform = `translateY(${-yPos})`;
yPos += 10;
rafId = requestAnimationFrame(render);
if(Ypos > 500){//숫자가 500보다 클 경우
cancelAnimationFrame(rafId); //로켓의 움직임을 정지
}
}
render();
</script>
</body>
빨리가는 유일한 방법은 제대로 가는것