JavaScript 입문 : Canvas 이론 정리 - 애니메이션 (RequestAnimationFrame : x축으로 공 움직이기)

Canvas에서 놓친 이론에 대하여 항목별로 정리를 하고 있습니다. 그리기 기능을 통하여 셀프체크로 별모양과 스마일 모양을 만들어 보았습니다. 다양한 그림을 스스로 그려본다는 것은 그냥 이론만 공부하는 것 보다는 아무래도 머리속에 자신만의 방법을 익히기에 좋은 것 같습니다. 

 

이제 본격적으로 Animation 에 대해 기본 이론을 정립하고자 합니다. 

 

본 내용은 '1분코딩 HTML5 Canvas 라이브강좌'를 기본으로 하고 있습니다. 

 

 

▒ ReaquestAnimationFrame(  )

 

자바스크립트에서 애니메이션을 나타내는 기본적인 방법으로는 requestAnimationFrame(  )메소드와 setInterval(  )메소드를 활용하는 방법이 있습니다. 두 단어에서 느낄 수 있듯이 첫번째는 프레임을 조정하는 것이고 두번째는 간격(interval)을 조절하는 것입니다. 아무래도 프레임을 조정하는 편이 좀 더 자연스러운 움직임을 보여줄 것입니다. 

 

1. Animation의 기본이해 

 

Animation이라는 것은 움직임, 동영상 같은 의미를 가지고 있습니다. 이는 사진이 동영상이 된 것처럼 하나의 멈춰있는 사물이 자리를 계속 이동하면서 보여지는 하나의 필름이라고 보면 됩니다. 즉, 프레임별로 사물이 이동하여 그 내용이 연속으로 보여지게 만들면 됩니다. 

 

예를 들어 왼쪽에 있는 작은 공이 옆자리로 조금씩 움직이는 모든 프레임을 하나로 연결시키면 Animation 효과가 나타나겠죠. 이를 도와주는 메소드가 RequestAnimationFrame입니다.

 

참고로 RequestAnimationFrame(  )의 기본속성은 초당 60회 반복을 목표로 움직인다고 하네요. 

 

2. 캔버스위 공 움직이기 

 

① 원 그리기 

 

이제 예를 가지고 설명하겠습니다. 

 

500 X 300 캔버스를 만들고 그 위에 반지름이 10인 원을 그리도록 하겠습니다. 함수를 선언해서 만들어 보죠. 기본사항은 충분히 알기때문에 <script>태그만 확인하도록 합니다. 

 

 

 

② 애니메이션 효과 (requestAnimationFrame)

 

함수로 만든 이유는 requestAnimationFrame(  )메소드에 적용시키고자 함입니다. 직접 반영을 해 보도록 하지요.

 

 

 

상기 그림에서 2가지 포인트를 확인할 필요가 있습니다. 하나는 공의 위치인데요. x죄표를 10을 여유로 주었는데 캔버스 왼쪽에 여유없이 붙어 있습니다. 이는 나중에 좌표에 대한 이해시간에 별도 정리를 할 예정인데요. 하여간 강좌와는 내용이 다른점이 있어 이해하는데 시간이 많이 걸리더군요. 

 

두번째는 공모양인 원을 그렸는데 거의 6각형처럼 보입니다. 이는 requestAnimationFrame( )이 초당 60회를 목표로 움직이고 있는 것입니다. 애니메이션을 위해서는 x 또는 y좌표를 변경해 주면 되겠습니다. 

 

x좌표를 변수로 만들어 증가시키면 효과를 볼 수 있을 겁니다 

 

③ x축으로 움직이기 

 

다음과 같이 변수와 변수를 중가시키고 내용을 보겠습니다 

 

 

 

상기 브라우저를 보면 원이 x축으로 움직이는데 꼬리에 고리를 물어 선이 그려지는 효과를 볼 수 있습니다. 이는 프레임이 시작되는 순간 캔버스를 초기화 시키고 다시 그려야 합니다. clearRect(  )를 사용합니다. 

 

④ clearRect(0, 0, canvas.width, canvas.height)

 

상기 메소드는 x, y좌표 0, 0에서 캔버스의 넓이 높이만큼 지우는 메소드입니다. 다음과 같이 씁니다.

 

 

 

한번만 공이 움직이고 화면에서 사라집니다. 

 

⑤ 캔버스 화면끝에서 공 멈추기 

 

애니메이션이 진행이 되면 화면끝에서 사라지면서 무한대로 x축으로 진행이 됩니다. 캔버스끝에서 공이 멈추는게 훨신 애니메이션 효과가 있을 듯 합니다. 

 

공의 반지름이 10이기 때문에 캔버스 오른쪽 끝의 위치와 움직이는 xPos 위치에 대해 조건식을 고민하면 될 듯 합니다. 

 

 

또는 requestAnimationFrame(  )을 멈추는 메소드는 cancelAnimationFrame(  )입니다. 매개변수가 필요아겠죠. 

 

 

 

⑥ 클릭하면 멈추기

 

이제는 캔버스를 클릭하면 공이 멈추는 효과를 보도록 하겠습니다. 

이부분은 간단합니다. cancelAnimationFrame(  )내용을 이벤트핸들러 함수에 반영하면 됩니다. 

 

 

아래 움직이는 공을 클릭해 보세요.