HTML5 캔버스를 활용한 프레임별 애니메이션 구현 방법

HTML5 캔버스 프레임별 애니메이션이란?

HTML5의 <canvas> 요소와 자바스크립트만으로도 별도의 라이브러리 없이 프레임별(frame-by-frame) 애니메이션을 손쉽게 구현할 수 있습니다. 기본 원리는 일정한 시간 간격으로 이미지 파일을 순차적으로 불러와 캔버스에 그려주는 것입니다.

아래 예제 코드를 실행하면 초당 15프레임(FPS) 속도로 5장의 이미지가 차례대로 표시되며, 마지막 프레임이 지나면 애니메이션이 자동으로 종료됩니다.

예제 코드

var myImageNum = 1;
var lastImage = 5;

var context = canvas.getContext('2d');
var img = new Image;

img.onload = function(){
    context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
    context.drawImage( img, 0, 0 );
};

var timer = setInterval( function(){
    if (myImageNum > lastImage){
        clearInterval( timer );
    }else{
        img.src = "images/left_hnd_"+( myImageNum++ )+".png";
    }
}, 1000/15 );

코드 동작 원리

• 이미지 번호 관리: myImageNum 변수는 현재 표시할 이미지 번호를, lastImage 변수는 마지막 프레임 번호를 저장합니다.
• 캔버스 초기화: getContext('2d')로 2D 드로잉 컨텍스트를 가져오고, 새 이미지가 로드될 때마다 clearRect() 메서드로 이전 프레임을 지운 뒤 drawImage()로 새 이미지를 그립니다.
• 타이머 설정: setInterval() 함수가 1000/15 밀리초(약 66ms) 간격으로 실행되어 초당 약 15프레임의 재생 속도를 만듭니다.
• 애니메이션 종료: 현재 이미지 번호가 마지막 번호를 초과하면 clearInterval()을 호출해 타이머를 정리하고 애니메이션을 종료합니다.

활용 팁

이미지 파일은 images/left_hnd_1.png부터 left_hnd_5.png까지 연속된 이름으로 준비하면 됩니다. 더 부드러운 애니메이션이 필요하다면 프레임 수를 늘리거나, setInterval() 대신 화면 주사율에 맞춰 동작하는 requestAnimationFrame()을 사용하는 방법도 고려해 보세요.