JavaScript Academy · 강의

requestAnimationFrame으로 애니메이션 만들기

매끄러운 Canvas 애니메이션을 만듭니다.

requestAnimationFrame으로 애니메이션 만들기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

requestAnimationFrame을 사용하는 이유

requestAnimationFrame(callback)은 다음 화면 다시 그리기 전에 그리기 함수를 실행하도록 예약합니다. 일반적으로 초당 60회 실행됩니다. setInterval과 달리 백그라운드 탭에서는 일시 중지되어 CPU와 배터리를 절약합니다.

function frame() {
  // draw one frame
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

기본 반복문

애니메이션 반복문은 캔버스를 지우고, 상태를 업데이트하고, 그린 다음, 스스로 다시 예약합니다.

let x = 0;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  x += 2;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

각 프레임 지우기

clearRect가 없으면 이전 프레임이 그대로 그려져 자국이 남습니다. 깨끗하게 다시 그리려면 모든 프레임의 시작 부분에서 전체 버퍼를 지우세요.

ctx.clearRect(0, 0, canvas.width, canvas.height);

타임스탬프 인수

콜백은 고해상도 타임스탬프(밀리초)를 받습니다. 이를 사용해 프레임 사이의 경과 시간을 계산합니다.

let last = 0;
function loop(now) {
  const dt = now - last;
  last = now;
  // dt = ms since previous frame
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

프레임 속도와 무관한 움직임

속도에 델타 시간을 곱하면 프레임 속도와 관계없이 movement speed가 일정하게 유지됩니다.

let x = 0;
const speed = 0.1; // px per ms
function loop(now) {
  const dt = now - (loop.last || now);
  loop.last = now;
  x += speed * dt;
  requestAnimationFrame(loop);
}

공 튕기기

객체가 가장자리에 닿으면 속도를 반전시켜 튕기게 합니다.

let x = 50, vx = 3;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x += vx;
  if (x < 0 || x > canvas.width) vx = -vx;
  ctx.beginPath();
  ctx.arc(x, 75, 15, 0, Math.PI * 2);
  ctx.fill();
  requestAnimationFrame(loop);
}
loop();

루프 중지

requestAnimationFrame은 id를 반환합니다. 애니메이션을 중지하려면 이 id를 cancelAnimationFrame에 전달합니다.

let id;
function loop() {
  id = requestAnimationFrame(loop);
}
id = requestAnimationFrame(loop);
// later:
cancelAnimationFrame(id);

일시 중지 및 재개

running 플래그를 추적합니다. 재개하려면 새 프레임을 요청하고, 일시 중지하려면 요청을 더 이상 보내지 않거나 대기 중인 요청을 취소하면 됩니다.

let running = true;
function loop() {
  if (!running) return;
  // draw...
  requestAnimationFrame(loop);
}
function pause() { running = false; }
function resume() { running = true; requestAnimationFrame(loop); }

여러 객체 애니메이션 적용

객체를 배열에 저장하고 루프 안에서 각 객체를 업데이트합니다.

const balls = [{ x: 10, vx: 2 }, { x: 80, vx: -3 }];
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const b of balls) {
    b.x += b.vx;
    ctx.fillRect(b.x, 60, 20, 20);
  }
  requestAnimationFrame(loop);
}
loop();

부드러운 움직임을 위한 이징

자연스럽게 감속되도록 이징을 적용해 target을 향해 보간합니다.

let x = 0;
const target = 200;
function loop() {
  x += (target - x) * 0.1; // ease out
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  if (Math.abs(target - x) > 0.5) requestAnimationFrame(loop);
}
loop();

성능 팁

루프 안에서 객체를 할당하지 말고, 그리기 호출을 일괄 처리하며, 가능하면 변경된 부분만 다시 그립니다. 초당 60프레임을 위한 약 16ms 예산을 넘지 않도록 프레임마다 수행하는 작업을 작게 유지합니다.

빠른 확인

애니메이션 지식을 테스트해 보세요.

복습: 애니메이션

requestAnimationFrame으로 애니메이션 루프를 만들고, clearRect로 각 프레임을 지웠습니다. 프레임 속도와 무관하게 동작하도록 타임스탬프를 사용하고, 튕기는 balls와 여러 객체를 애니메이션으로 만들었으며, 이징을 적용하고 cancelAnimationFrame으로 중지하거나 일시 중지하는 방법을 배웠습니다.

자주 묻는 질문

“requestAnimationFrame으로 애니메이션 만들기” 강의는 무료인가요?

네 — “requestAnimationFrame으로 애니메이션 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“requestAnimationFrame으로 애니메이션 만들기”에서 뭘 배우나요?

매끄러운 Canvas 애니메이션을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“requestAnimationFrame으로 애니메이션 만들기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기