[JavaScript] window.requestAnimationFrame()

 

세상은 넓고 아직 갈길이 멀~~~~~~다는 것을^^,, #하지만 #가보자고

 

🤔 requestAnimationFrame?

자바스크립트의 webAPI에 있는 비동기 함수

브라우저에게 수행하기를 원하는 애니메이션을 알리고, 다음 리페인트가 진행되기 전 해당 애니메이션을 업데이트하는 함수를 호출하게 함. 리페인트 이전에 실행할 콜백을 인자로 받음. 리턴값은 콜백 리스트의 항목을 정의하는 고유한 요청 id인 long 정수 값. (MDN 참고)

 

이걸 왜 쓰는거지?

• 애니메이션을 위해 만들어진 ""비동기""함수
• 성능 최적화 (백그라운드 동작 및 비활성화 시 중지)
• 최대 1ms로 제한되며, 1초에 60번 동작
• 다수의 애니메이션도 각각 타이머값을 생성 및 참조하지 않고, 내부의 동일한 타이머를 참조함

 

requesetAnimationFrame을 사용하면 이런 느낌이다!  (용량을 낮추려 했더니 화질이 좀 안좋은 것 같지만 애써 무시해본다...)

 

const startBtn = document.getElementById("startBtn");
const stopBtn = document.getElementById("stopBtn");
const count = document.getElementById("count");

let cnt = 0;
let isCounting;

function countUp() {
  count.innerText = cnt;
  cnt++;

  isCounting = requestAnimationFrame(countUp);
}


function handleStart() {
  countUp();
}

function handleStop() {
  cancelAnimationFrame(isCounting);
}

startBtn.addEventListener("click", handleStart);
stopBtn.addEventListener("click", handleStop);

반복 호출할 함수 countUp을 requestAnimationFrame( 여기!! )의 인자로 넘겨주어 재귀적으로 실행한다.

특정한 분기문이 없다면 아마 평생 동작할 것이다.

멈추는 방법은 requestAnimationFrame을 변수로 저장하여 cancelAnimationFrame에 넘겨준다.

 

 

🤔 setInterval과 비슷하지 않나?

멋지게 정리된 블로그를 발견해서 참고하여 글을 작성한다.

 

• 1초에 60프레임 === 1프레임에 16.6ms 정도 소요
• 애니메이션 코드가 복잡하고 오래걸려서 실행하는데에 16.6ms보다 더 걸리면?
  → 정해진 시간 내에 프레임을 찍어내지 못했기 때문에 뚝뚝 끊기듯이 보이게 된다.

이미지 출처 : https://simsimjae.tistory.com/402

위 이미지를 보면 한 프레임당 16ms가 주어지는데, setTimeout이 약 8ms쯤에 시작이 됐다.

저렇게 시간을 초과하게 되면 프레임이 생성되지 못하고 누락된 채 넘어가게 된다. 자바스크립트는 싱글스레드이기 때문에, 무거운 작업을 계속 돌리게 되면 프레임이 누락될 확률이 더 높아진다. (setTimeout, setInterval은 프레임을 신경쓰지 않는다. 나는 나의 길을 간다)

그리고 CPU나 그래픽카드가 느리면 인터벌이 더 느려질 수 도 있다고 한다!

 

위에서도 나온 얘기이지만, setTimeout이나 setInterval은 보이지 않는 곳에서도 수행 되지만,

RAF는 현재 창에 표시되지 않으면 애니메이션을 중지해서 성능을 향상시킨다. (최적화)

 

 

 

 

👀참고 (감사합니다)

https://simsimjae.tistory.com/402

자바스크립트 애니메이션 - requestAnimationFrame 활용하기

 

https://corock.tistory.com/466

[33-js-concepts] 10. setTimeout, setInterval and requestAnimationFrame

 

https://blog.eunsatio.io/develop/JavaScript-window.requestAnimationFrame-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC

Slacking studio x BLOG

 

https://webisfree.com/2020-03-19/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-requestanimationframe()%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C 

[자바스크립트] requestAnimationFrame()을 사용하는 방법 및 예제

 

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh920765(v=vs.85)?redirectedfrom=MSDN 

Timing control for script-based animations ('requestAnimationFrame') (Windows)

 

https://blog.naver.com/PostView.naver?blogId=tk2rush90&logNo=221076910932&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView 

[자바스크립트] requestAnimationFrame 알아보기