결과
1초에 60번 실행되는 성능좋은 애니메이션
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="counter">0</div>
</body>
</html>
<script>
// 엘리먼트
const counterEl = document.querySelector("#counter");
// 변수
let num = 0; // 시작
let targetNum = 120; // 종료
let raf; // = requestAnimationFrame
let delay = 2000; // 종료까지시간
// 애니메이션 설정
const performAnimation = () => {
num++;
counterEl.innerHTML = `${num}`;
raf = requestAnimationFrame(performAnimation)
}
// 애니메이션 실행 - 1초에 60번 실행됨
requestAnimationFrame(performAnimation);
// 종료 설정
setTimeout(()=>{
cancelAnimationFrame(raf);
counterEl.innerHTML = `${targetNum}`;
}, delay)
</script>
겪은 이슈를 공유합니다.