JavaScript 입문 : Canvas Animation V - 다양한 사이즈 원 만들고 크기 줄어 들게 만들어서 클릭 이벤트에 연결하기

지난시간까지 캔버스위 같은 사이즈 (반지름 50)의 초록색 원이 100개 생겼다가 사라지는 효과까지 공부를 해 보았습니다. 이어서 좀 더 효과를 주면서 좀 더 어렵지만 멋있는 애니메이션에 도전을 하고자 합니다. 

 

역시 Animation 학습은  'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 

 

1. 다양한 사이즈 원 만들기 

 

랜덤 사이즈로 만들기 위한 작업은 constructor에서 이미 랜덤 설정을 해 놓았습니다. 원을 그리는 함수에서 반지름이 50으로 되어 있는 부분을 constructor의 내용으로 바꾸어 줍니다. 

 

 

화면을 보면 1 ~ 6 사이즈의 100개 원이 보입니다. 즉, 사이즈를 수정하고자 하면 constructor를 수정하면 되겠네요. 보기 좋은 사이즈는 1 ~ 16사이가 적당해 보아네요. 

 

 

2. 원 크기 줄어 들게 만들기 

 

애니메이션 효과는 현재 버블효과도 좋지만 이 원들이 최초 본인 크기에서 사이즈가 줄어든다면 훨씬 더 효과가 배가 될 것으로 판단됩니다. 

 

여기서 고려할 점은 자얀스러운 애니매이션 효과를 위해 -0.1씩 크기를 줄여 나간다는 조건을 충족하는 식을 고민하고 일정크기 이하가 되는 원들을 배열에서 빼주면 깥끔하게 사라지는 효과를 볼 수 있을 것입니다. 

 

먼저 update(  )함수에서 -0.1씩 줄어든다는 식은 다음과 같이 반영할 수 있습니다. 

 

 

여기까지 반영하고 회면을 보더라도 사이즈가 줄어 드는 것을 볼 수 있습니다. 궁극적인 애니메이션의 목적은 이 사라지는 모습이 마우스를 따라 다니면서 혜성처럼 불꽃을 보여주는 효과를 고민하기 때문에 최종 update(  )와 draw(  )(가 반영이 되는 showParticles(  ) 함수에 반영을 합니다. 

 

일정 크기가 되어진 입자들은 particleArray 배열에서 빼는 걸로.

 

 

 

상기와 같이 작성하면 브라우저에 잘 반영이 됩니다. 만일 i++로 한다면 update(  )가 되고 draw(  )되는 과정에서 일부 주기가 빠지게 되어 원이 반짝 거리면서 사라집니다. 

 

3. 클릭시마다 효과 나타내기 

 

상기 다양한 사이즈의 원을 만들고 그 원들이 일정한 크기로 줄어 들게 하는 효과를 클릭시 마다 발생하도록 만들 수 있습니다. 본격적인 마우스이벤트 단계로 들어온 것 같습니다. 

 

그러기 위해서 순서를 고민해 보변 다음과 같습니다. 

 

① 랜덤좌표가 아닌 마우스 좌표 변경 (constructor 에서)

② 클릭이벤트 함수 만들기 

③ 초기함수로 Load되는 것이 아니라 클릭이벤트에서 생성자 찍어내기 

 

먼저 좌표를 랜덤이 아닌 마우스 위치로 변경 하겠습니다. 

 

 

그리고 최초 연습했던 클릭이벤트 함수를 마우스무브 이벤트 함수위에 만들어 줍니다. 그리고 class 생성자를 로드 시킨 init(  ) 함수를 지우고 클릭이벤트 함수내 new 생성자를 반영해 봅니다. 

 

 

브라우저에서는 클릭할 때 마다 하나의 원이 생겨 사이즈가 줄어 들면서 사라지는 효과를 보게 됩니다. 그러면 클릭할 때 마다 10개 원이 생길 수 있도록 반복문으로 배정해 봅니다. new 생성자를 반복문에 반영하면 됩니다. 

 

 

이제 브라우저에서는 클릭시 마다 10개의 다양한 원이 생기고 사라집니다. 같은 코드를 마우스를 움직일때도 추가 반영해 줍니다. 

 

 

 

 이제는 캔버스 위로 마우스를 클릭하거나 이동하면 10개의 입자들이 다양하게 나타납니다. 

 

다음 JS Fiddle 창을 통해 결과를 보여 드립니다. 마우스로 자유롭게 움직여 보세요. 재미 있는 결과를 보게 됩니다.