[그래픽 처리] 애니메이션/setInterval()

[1] 공 튀기기 애니메이션

공이 캔버스의 모서리에 도달하면 반대 방향으로 움직이는 애니메이션 입니다.

 

setInterval() 메서드를 이용하여 100일리초(msec)마다 drawBall() 함수를 호출하도록합니다.

setInterval(drawBall, 100);

 

그리고 drawBall() 함수에서 화면을 초기화한 후 공을 렌더링합니다.
렌더링 처리에서는 우선 fillRect() 메서드로 캔버스의 배경을 흰색으로 한 후 arc() 메서드로 빨간 공을 렌더링합니다.

공의 이동은 dir_x/dir_y(공의 이동양과 방향을 지정하는 속성)만큼 공의 좌표를 증가시켜서 구현하는데, 이동 후의 좌표가 캔버스를 벗어날 경우에는 dir_x/dir_y에 '-1'을 곱하여 반대로 이동 시킵니다.

   ball.x += ball.dir_x;
   ball.y += ball.dir_y;
   if (ball.x < 0  ||  ball.x > 300) {ball.dir_x*= -1;}
   if (ball.y < 0  ||  ball.y > 300) {ball.dir_y*= -1;}

 

[2] 변형과 반투명 효과를 사용한 애니메이션

투명도를 지정하는 globalAlpha 값을 조절하여 하나의 막대만 반투명하게 렌더링합니다.
anim() 함수가 호출될 때마다 변수 ci 값이 1씩 증가하여, 
이 변수의 값에 따라 하나의 막대만 진하게 렌더링하게 되어 결과적으로 막대가 회전하는 것 처럼 보입니다.