5-2-1.타이머 애니메이션
애니메이션은 쉽게 말해서 움직이는 그림이다. 웹 페이지가 가만히 있지
않고 계속 꿈틀거려 사용자의 주의를 끄는 기법이다. 일반 웹 페이지에서도 멋지게 펼쳐지는 메뉴, 화면 중앙에 열리는 팝업창, 네비게이션, 자료 목록 등을 위해 애니메이션이 활용된다. 일단 예쁘고 움직임이
있어 어디쯤에서 무슨 일이 벌어지는지 직관적으로 보여서 좋다.
지금까지 이러한 애니메이션 효과는 플래시로 구현했었다. 그러나 HTML5가 도입되면서 CSS나
jQuery로도 간단한 애니메이션을 처리할 수 있게 되었다. 메뉴, 아코디언, 팝업창 등에 대한 애니메이션은 jQuery로도 충분하다.
움직임이 가장 많은 예는 게임이다. 게임은 본질적으로 동적이므로 한시도
가만히 있지 않고 화면이 계속 바뀐다. 게임같은 복잡한 애니메이션은 캔버스가 담당한다. 캔버스는 임의의 그림을 그릴 수 있으므로 표현 능력이 무한해 플래시의 영역을 거의 다 소화해낸다.
애니메이션은 사실 굉장히 단순하고 간단한 기법이다. 시간의 흐름에
따라 주기적으로 그림을 바꾸어 다시 그리기를 반복하면 된다. 시간이 개입되므로 원론적으로 타이머로 구현하는
것이 제일 쉽다. 애니메이션이 무한히 반복되더라도 다음과 같은 무한 루프를 사용해서는 안된다.
for (;;) {
//
애니메이션 처리
}
이렇게 하면 이 루프를 빠져 나올 수 없으므로 화면을 다시 그리지도 못하고 사용자의 조작에도 반응하지 못하므로
다운된 것과 같다. 무한히 반복하더라도 틈틈이 매 프레임을 그려야 한다. 그래서 타이머가 제격이다. 다음 예제는 극단적으로 간단한 애니메이션을
보여준다.
anim.html
<script>
var
canvas;
var
ctx;
var x
= 10;
var
delta = 1;
window.onload
= function() {
canvas
= document.getElementById("canvas");
if
(canvas == null || canvas.getContext == null) return;
ctx
= canvas.getContext("2d");
setInterval(draw,
30);
}
function
draw() {
ctx.clearRect(0,
0, canvas.width, canvas.height);
ctx.fillRect(x,
10, 20, 20);
if
(x + 20 > canvas.width || x < 0) {
delta
= -delta;
}
x
+= delta;
}
</script>
애니메이션 대상 변수는 값을 계속 유지해야 하므로 전역으로 선언해야 한다.
onload에서 초당 33번의 속도로 draw 함수를
주기적으로 호출한다. 전역 변수 x는 10, delta는 1로 초기화하고
draw 함수는 매 프레임마다 이 값을 규칙적으로 변경하여 애니메이션을 수행한다.
이전 프레임을 지우고 다시 그려야 하므로 clearRect를 먼저
호출한다. 지우지 않으면 이전의 사각형이 계속 남아 있어 막대 모양으로 점점 커질 것이다. 화면을 완전히 지워 이전 잔상을 깨끗하게 비운 후 새로운 x 위치에
사각형을 그린다. x에 delta를 더하고 캔버스 좌우 벽에
부딪치면 delta의 부호를 변경하여 방향을 바꾼다. 매
프레임마다 x 좌표가 바뀌므로 사각형이 움직인다.
왼쪽벽에 부딪친 조건은 x가 음수인지를 보면 된다. 오른쪽 벽에 부딪친 조건은 사각형의 왼쪽변 좌표가 아닌 오른쪽 변의 좌표를 봐야 하므로 x에 사각형의 폭인 20을 더한 후 이 값을 캔버스의 폭과 비교해야
한다. 어느쪽이든 부딪치면 delta의 부호가 바뀌므로 반대
방향으로 움직인다. 가만히 내버려 둬도 사각형이 좌우로 왔다리 갔다리 어슬렁거릴 것이다.
delta와 타이머 호출 주기로 애니메이션 속도를 제어한다. delta값을 증가시키면 사각형의 이동 속도가 빨리고 타이머 호출 주기를 늘리면 애니메이션은 더 느려진다.
타이머에서 draw를 주기적으로 호출해야 하므로 예제의 구조가 조금
복잡하다. 익명 함수를 사용하면 draw 메서드안에서 모든
것을 처리할 수 있으므로 예제가 조금 더 간단해진다. 다음과 같이 작성해도 결과는 같다.
anim2.html
<script>
var
canvas;
var
ctx;
var x
= 10;
var
delta = 1;
window.onload
= function() {
canvas
= document.getElementById("canvas");
if
(canvas == null || canvas.getContext == null) return;
ctx
= canvas.getContext("2d");
draw();
}
function
draw() {
var
x = 10;
var
delta = 1;
setInterval(function()
{
ctx.clearRect(0,
0, canvas.width, canvas.height);
ctx.fillRect(x,
10, 20,20);
if
(x + 20 > canvas.width || x < 0) {
delta
= -delta;
}
x
+= delta;
},
30);
}
</script>
draw 함수 안에서 익명 함수로 타이머를 설치하고 익명 함수가 주기적으로
호출되어 애니메이션을 처리한다. 오해하지 말 것은 모든 코드가
draw 함수에 작성되어 있지만 그렇다고 해서 draw 안에서 계속 루프를 도는 것이 아니라는
점이다. draw는 타이머 함수를 등록하고 바로 리턴할 뿐이며 매 프레임마다 익명 함수가 호출되어 주기적으로
그림을 그린다.
계속 draw 함수 안에서 실행되는 것이 아니라 주기적으로 타이머
함수를 호출하므로 흐름을 블록하지 않으며 사용자 입력에도 반응할 수 있다. 이 예제에서 draw의 지역 변수인 x, delta를 익명 함수에서 계속 참조할
수 있는 것은 실행기가 클로저를 유지하고 있기 때문이다. 간단한 애니메이션은 이 방법으로도 작성할 수
있지만 draw 안에서 모든 것을 처리해야 하므로 확장성이 떨어진다.