<JS> JS로 애니메이션 만들기 (setInterval,setTimeout)

2017. 8. 11. 20:34

* 자바스크립트를 활용한 애니메이션 *

- setInterval(함수,시간) : 매 '시간'마다 '함수'를 실행시킨다

(~시간에 한번 함수 실행)

-setTimeOut : '시간'이 경과하면 '함수'를 한 번 실행시킨다.

-clearInterval(변수) : interval을 없애준다

* 시간단위 : 1ms (1000ms = 1s)

*순서대로 개발하는것 : 절차지향 프로그램이 (<-> 객체지향 프로그래밍)

<HTML>

(+) CSS의 transition과 비교할 때 사용할 태그

<CSS>

<화면>

* setInterval을 이용해 1초마다 숫자가 바뀌는 초시계 만들기 *

1. 변수 지정해놓기

2. 초시계의 시간을 나타낼 num 변수

3. setInteval

1초에 한번 clock의 innerHTML을 1씩 늘린다.

(F5누르면 바로 실행)

4. 시작 버튼을 눌렀을 때 실행하도록 addEventListener 안에 넣어준다.

-> 버튼을 누를수록 Interval이 중첩되므로 숫자가 커지는 속도가 점점 빨라진다.

5. 속도가 빨라지는 것을 방지하기 위해 버튼을 누를 때마다 이전에 실행되고 있던 Interval을 지우도록 clearInterval

clearInterval은 변수가 필요하므로 변수를 만들었다.

저렇게 변수에 넣으면서 setInterval을 해도 실행된다

move를 setInterval을 실행하면서 만들면 clearInterval 에서 오류가 나므로 밖에 미리 만들어 두었다.

6. 정지를 눌렀을 때 시계가 멈추는 동작

clearInterval

7. num=1으로 초기화 해주면 정지하고 다시 시작할 때 초시계가 처음부터 돌아가게 된다.

*응용 : 이동 버튼을 누르면 시계가 오른쪽으로 200px 이동하게 하기*

* 이동 응용을 css transition으로 나타냈을 경우 *

<CSS>

<JS>

훨신 간단하다 ^.^

공부기록