html5 애니메이션 썸네일형 리스트형 [그래픽 처리] CSS3 애니메이션/HTML5 애니메이션/animation-timing-function [그래픽 처리] CSS3 애니메이션/HTML5 애니메이션/animation-timing-function CSS3는 애니메이션 기능을 제공합니다. 속성 지정만으로도 간단하게 애니메이션을 구현할 수 있습니다. ● 애니메이션 관련 속성 속성 의미 animation-duration 애니메이션의 동작 시간 (ex) '1s', '0.5s' animation-iteration-count 애니메이션의 동작 회수('infinite' 지정시 무한 반복) animation-name 애니메이션의 이름 animation-timing-function 애니메이션의 타이밍 ● animation-timing-function 속성에 지정할 수 있는 값 속성 의미 ease 시작과 종료를 부드럽게 linear 일정 ease-in 서서히 시.. 더보기 [그래픽 처리] 애니메이션/setInterval() [1] 공 튀기기 애니메이션 공이 캔버스의 모서리에 도달하면 반대 방향으로 움직이는 애니메이션 입니다. setInterval() 메서드를 이용하여 100일리초(msec)마다 drawBall() 함수를 호출하도록합니다. setInterval(drawBall, 100); 그리고 drawBall() 함수에서 화면을 초기화한 후 공을 렌더링합니다. 렌더링 처리에서는 우선 fillRect() 메서드로 캔버스의 배경을 흰색으로 한 후 arc() 메서드로 빨간 공을 렌더링합니다. 공의 이동은 dir_x/dir_y(공의 이동양과 방향을 지정하는 속성)만큼 공의 좌표를 증가시켜서 구현하는데, 이동 후의 좌표가 캔버스를 벗어날 경우에는 dir_x/dir_y에 '-1'을 곱하여 반대로 이동 시킵니다. ball.x += ba.. 더보기 이전 1 다음
