Web - 10) 캔버스를 사용한 애니메이션

WEB

HTML5 캔버스를 사용하면 웹 페이지에서 동적인 애니메이션을 쉽게 구현할 수 있음. 애니메이션을 구현하기 위해서는 캔버스의 상태를 관리하고, 애니메이션의 프레임을 업데이트하며, 화면을 갱신하는 과정이 필요함

캔버스에서 애니메이션을 구현하는 순서

(1) 캔버스 클리어

애니메이션을 매 프레임마다 새롭게 그리기 위해서는 캔버스를 먼저 지워야 함. clearRect 메소드를 사용하여 캔버스의 전체 영역을 지울 수 있음

function clearCanvas(ctx, canvas) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

이 함수는 주어진 ctx(2D 콘텍스트)와 canvas를 사용하여 전체 캔버스를 지움

(2) 캔버스 상태 저장

애니메이션에서 그림을 그리기 전에 현재 캔버스의 상태를 저장하는 것이 중요함.

이를 통해 나중에 상태를 복원이 가능, save 메소드를 사용하여 현재 상태를 저장할 수 있음

function saveCanvasState(ctx) {
  ctx.save();
}

save 메소드는 캔버스의 현재 상태를 저장하고, 이후의 그래픽 작업에서 이 상태를 기준으로 작업할 수 있게 함

(3) 애니메이션으로 만들 형태 그리기

애니메이션을 위해서는 매 프레임마다 형태를 그려야 함. 이 단계에서는 애니메이션에 필요한 도형, 텍스트, 이미지 등을 그림

(4) 캔버스의 상태 재저장

모든 그리기 작업이 끝나면, restore 메소드를 사용하여 캔버스의 상태를 복원.

이를 통해 저장해 놓은 상태로 돌아가며, 이전의 그래픽 작업에 영향을 주지 않도록 함

애니메이션 제어

애니메이션의 프레임을 제어하고 실행하는 방법에는 여러 가지가 있음.

가장 일반적으로 사용되는 메소드들은 setInterval, setTimeout, 그리고 requestAnimationFrame 

(1) setInterval(function, delay) 메소드

setInterval은 주어진 시간 간격마다 특정 함수를 반복적으로 호출함.

애니메이션의 프레임을 업데이트할 때 사용할 수 있음

 setInterval(함수, 1000 / 60); // 60fps

setInterval을 사용하여 매 1/60초마다 함수를 호출하고, 이를 통해 애니메이션을 구현

(2) setTimeout(function, delay) 메소드

setTimeout은 주어진 시간 간격 후에 특정 함수를 호출함. 애니메이션의 경우, setTimeout을 사용하여 재귀적으로 애니메이션을 구현할 수 있음

(3) requestAnimationFrame(callback) 메소드

requestAnimationFrame은 브라우저가 다음 화면을 다시 그리기 전에 호출할 콜백 함수를 요청.

이는 애니메이션을 부드럽고 효율적으로 실행하는 데 적합함

 

---

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Advanced_animations

발전된 애니메이션 - Web API | MDN