반응형

자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.





애니메이션을 이용해보는 기초적인 방법을 알아보고자 한다.


이전까지 적어온 블로그 내용들을 종합하면 충분히 만들어 나갈 수 있다.


거두절미하고 코드를 통해 동작 과정을 알아보자.













1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
 
<style>
    #container {
        width: 400px;
        height: 400px;
        position: relative;
        background: yellow;
    }
 
    #animate {
        width: 50px;
        height: 50px;
        position: absolute;
        background-color: red;
        text-align : center;
        line-height : 50px;
    }
</style>
 
<body>
 
    <p>
        <button onclick="myMove()"><< 클릭해보세요! >></button>
    </p>
 
    <div id="container">
        <div id="animate"></div>
    </div>
 
 
    <script>
        var chk = false;
 
        function myMove() {
          if(chk)
          {
              document.getElementById("animate").innerHTML = "wait";
          }
 
          else
          {
              chk = true;
              var square = document.getElementById("animate");
              var pos = 0;
              var id = setInterval(frame, 5);
 
              function frame() {
                if (pos == 350) {
                    clearInterval(id);
                    document.getElementById("animate").innerHTML = "";
                    chk = false;
                }
                else {
                  pos++;
                  square.style.top = pos + 'px';
                  square.style.left = pos + 'px';
                }
              }
          }
        }
    </script>
 
</body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus






우선 애니메이션을 보기 위해서 스타일을 적용해야한다.


사각형이 아래로 움직이는데 그 바탕이 되는 사각형을 container이라고 지정, 움직이는 사각형을 animate 라고 지정을 한다.


그 후 버튼을 만들고 클릭시 myMove()라는 함수가 실행되도록 한다.


myMove함수는 클릭이 된다면 square 변수가 id가 animate인 것을 가져오게 되고, 


id 변수는 setInterval을 통해 0.005초마다 함수를 한번씩 실행한다.


pos가 350이 되면 이 frame함수가 멈추게 된다. 즉, 사각형이 끝까지 도달하면 멈춘다는 의미가 된다.


pos가 아직 350이 되지 않았다면 style의 top과 left를 수정해가며 작은 사각형을 이동시켜주는 효과를 내준다.


이때 chk변수는 버튼을 여러번 누르는 것을 방지하기 위해 제작된 것이다.




setInterval에 대해 조금 더 알아보기 위해서는 아래 코드를 실행해보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <title>test title</title>
</head>
 
<body>
    <h2> JavaScript </h2>
 
    <p id="test"></p>
 
    <script>
        setInterval(myTimer, 1000);
 
        function myTimer() {
            document.getElementById('test').innerHTML = Date();
        }
 
    </script>
 
</body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus


클릭하시면 결과 화면을 확인 할 수 있습니다.


이 코드는 간단한 시계를 구현한 코드이고, 1초에 한번씩 자동적으로 함수가 실행됨을 알 수 있다.




반응형
저작자표시 비영리 변경금지

'Basic > JavaScript' 카테고리의 다른 글

자바스크립트 use strict  (0) 2017.09.24
addEventListener() 메서드  (0) 2017.09.24
자바스크립트 DOM(Document Object Model)  (0) 2017.09.23
자바스크립트 스트링 메서드  (0) 2017.09.22
자바스크립트 이벤트 사용 방법  (0) 2017.09.21

티스토리툴바