- 전체보기 (246)
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- next.js
- JavaScript
- 클라우드
- 파이썬
- docker
- es6
- 프론트엔드
- 백준
- 블록체인
- react
- HTML
- 알고리즘
- 자바스크립트
- 웹
- k8s
- 백엔드
- 타입스크립트
- node.js
- CSS
- kubernetes
- TypeScript
- 컴퓨터공학
- 이슈
- 쿠버네티스
- BFS
- AWS
- 솔리디티
- 가상화
- 이더리움
- 리액트
- Today
- Total
즐겁게, 코드
requestAnimationFrame 으로 애니메이션 구현하기 본문
requestAnimationFrame은 자바스크립트로 *애니메이션 효과를 쉽게 구현할 수 있는 API입니다.
(* 이 글에서의 애니메이션이란, 프레임 단위로 픽셀을 재렌더링하는 행위를 의미합니다.)
기존의 자바스크립트 애니메이션은 setInterval 등을 사용해 1.5ms 마다 대상의 위치를 변경하는 등의 방법을 사용했지만, 디스플레이 주사율이 기기마다 다양해짐에 따라 이는 좋지 않은 경험으로 다가올 수도 있었습니다.
setInterval을 사용한 애니메이션
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="./index2.js" defer></script>
</head>
<body>
<img id="car" src="./car.png" alt="car" />
<span>position: </span><span id="value">0</span>
</body>
</html>
const car = document.querySelector("#car");
const value = document.querySelector("#value");
let xPos = 0;
const render = () => {
value.innterHTML = xPos;
xPos += 1;
car.style.transform = `translateX(${xPos}px)`;
};
setInterval(render, 1.5); // 약 66프레임 애니메이션 효과
// -> 144Hz 모니터에서는 프레임이 부드럽지 않게 재생됨!
그러나 requestAnimationFrame은 순수히 애니메이션을 구현하기 위해 등장한 API로, 현재 디스플레이의 주사율을 기반으로 한 보정을 적용해 동작합니다.
requestAnimationFrame을 사용한 애니메이션
const car = document.querySelector("#car");
const value = document.querySelector("#value");
let xPos = 0;
const render = () => {
value.innerHTML = xPos;
xPos += 1;
car.style.transform = `translateX(${xPos}px)`;
requestAnimationFrame(render);
};
render();requestAnimationFrame은 화면 주사율에 맞춰 동작할 콜백을 인자로 받고, 주사율에 따라 다른 주기로 호출합니다.
현재 모니터의 경우 60Hz로 동작하기 때문에 render 함수는 1초에 60번 실행되고, 사용자는 디스플레이에 최적화된 애니메이션을 느낄 수 있게 됩니다.
cancelAnimationFrame
setInterval에 clearInterval 함수가 함께하는 것처럼 애니메이션을 중단하기 위한 함수도 존재합니다.
바로 cancelAnimationFrame 함수로, 이를 사용하면 애니메이션을 정지시킬 수도 있습니다.
const car = document.querySelector("#car");
const value = document.querySelector("#value");
let xPos = 0;
let animationId;
const render = () => {
value.innerHTML = xPos;
xPos += 5;
car.style.transform = `translateX(${xPos}px)`;
animationId = requestAnimationFrame(render);
};
// 클릭 시, 3초간 정지 후 재생
window.addEventListener("click", () => {
cancelAnimationFrame(animationId);
setTimeout(() => requestAnimationFrame(render), 3000);
});
render();
TL;DR
- requestAnimationFrame을 사용하면 효과적인 애니메이션 구현이 가능하다.
- requestAnimationFrame은 콜백을 인자로 받으며, 콜백의 호출 주기는 디스플레이 주사율에 따라 결정된다.
- cancelAnimationFrame을 사용하면 애니메이션 중단이 가능하다.
'💬 언어 > Javascript' 카테고리의 다른 글
| 제너레이터부터 리덕스 사가까지 - 01. 제너레이터 (0) | 2021.04.05 |
|---|---|
| 동적으로 모듈 불러오기 (0) | 2021.03.09 |
| find, some 메서드로 배열 검사하기 (0) | 2021.02.21 |
| 콜 스택과 이벤트 루프 (0) | 2021.02.20 |
| 커링은 어려워 (0) | 2021.02.18 |
