💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #19 - Animation ( 애니메이션 )

자, 이번에는 자바스크립트를 이용해서 화면에 애니메이션을 보여주는 방법을 한번 배워볼까요?

시작하기 전에 이미 자바스크립트 기반의 애니메이션을 위한 라이브러리가 존재한다는 것을 알고 넘어갑시다. ( Script.Aculo.us. )

이런 라이브러리를 사용하면 간편하게 애니메이션을 만들 수 있겠지만 그래도 어떤식으로 동작을 하는지는 알고넘어가야 나중에 본인이 이런 라이브러리를 수정해서 더 좋게 바꿀 수도 있습니다.

그럼 시작해볼까요? 이번 포스팅에서는 기본적인 개념에 대해서 다룰 겁니다. 어떤 식으로 애니메이션이 완성이 되는지 말이죠.

가장 많이 쓰이는 함수부터 확인을 해볼까요?

setTimeout( 함수명, 밀리초) - 지정한 밀리초 후에 함수를 실행시킵니다. ( 함수가 종료된 뒤에 특정 시간이 지나면 다시 함수를 실행시킵니다. )
setInterval( 함수명, 밀리초) - 지정한 밀리초가 지날 때마다 한번씩 함수를 실행시킵니다. ( 실행시킨 함수가 끝나지 않아도 특정 시간이 지나면 또 실행시킵니다. )
clearTimeout( setTimeout() 함수의 변수 ) - setTimeout() 함수의 변수의 타이머를 클리어시킵니다. ( 무슨 말인지는 예제를 보면 이해가 가실겁니다. )

본격적으로 시작하기 전에 DOM 객체의 속성을 이용해서 특정 객체의 위치를 조정할 수 있다는 것을 알고넘어가시면 좋을 것 같습니다. top 이나 left 같은 속성을 줄 수 있는거죠. 간단한 문법은 다음과 같습니다.

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

수동적 애니메이션

이번 예제는 버튼을 누르면 이미지를 오른쪽으로 10픽셀씩 움직여주는 예제입니다. 버튼을 누르면 moveRight()함수를 호출을 하는데 이 함수는 imgObj.style.left를 이용해서 왼쪽에서 얼마나 떨어져 있는지를 지정해줍니다. init()에서는 left의 초기값을 지정해주는데 이 초기값을 숫자로 변환한다음 10을 더한값을 다시 left에 넣어주고 있네요. 즉, 초기위치에서 계속 10씩 더해지는 함수가 되는 것입니다. 이해가 안되시면 init()에서 left의 숫자를 변경해준다음 moveRight()에서 parseInt(...)부분을 빼고 그냥 10 + 'px'만 left에 할당해줘 보세요.

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">

var imgObj = null;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init; 

</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>

위 예제에 대한 단계적 실행은 아래와 같습니다.

자바스크립트의 getElementById() 함수를 이용해서 DOM 객체를 얻어옵니다. 여기서는 이미지가 되겠죠. 그렇게 얻어온 객체를 imgObj 변수에 할당합니다.
Window가 로드될 때 init() 함수가 실행이 되면서 imgObj 객체의 position 과 left 속성을 초기화 해줍니다.
그리고 버튼이 화면에 생성이 되고, 이 버튼이 클릭이 되는 순간 moveRight() 함수가 호출되면서 left 거리가 10 픽셀 증가하게 됩니다. 이 숫자에 마이너스 부호를 붙이면 반대쪽으로 움직이게 됩니다.

자동 애니메이션

위에서는 버튼을 클릭했을 때 움직이도록 했지만 이번에는 시간에 따라서 움직이도록 해보겠습니다. 제일 처음에 설명드린 세가지 함수들 중에서 setTimeout() 함수를 이용하는 예제입니다.

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">

var imgObj = null;
var animate ;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
   animate = setTimeout(moveRight,20); // 20 밀리초 마다 moveRight 함수 호출
}
function stop(){
   clearTimeout(animate);
   imgObj.style.left = '0px'; 
}
window.onload =init;

</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>

이번에는 시작과 종료버튼 두개가 생겼고 시작버튼을 누르면 moveRight()함수가 호출이 되는데 첫번째 예제에서 쓰였던 moveRight()과는 조금 다르네요 그쵸? 한줄이 더 생겼습니다. animate변수에 setTimeout(moveRight, 20)을 할당해주었네요. setTimeout 함수를 이용해서 moveRight함수를 20밀리초 마다 실행을 시키고 있습니다.

마우스 이벤트를 이용한 애니메이션

아래 예제는 마우스가 특정 이미지 위에 올라갔을 때 이미지를 다른 이미지로 변경해주는 것입니다.

<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type="text/javascript">

if(document.images){
    var image1 = new Image();      // Preload an image
    image1.src = "/images/html.gif";
    var image2 = new Image();      // Preload second image
    image2.src = "/images/http.gif";
}

</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;"
            onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/images/html.gif" />
</a>
</body>
</html>

위 소스가 실행되는 순서를 한번 볼까요?

페이지가 로딩될 때 if 문에서 이미지 객체가 존재하는지 검사합니다. 이미지 객체가 존재하면 블락내의 명령을 실행하지만 존재하지 않으면 실행하지 않습니다.
Image() 생서자를 이용해서 2개의 이미지 객체를 생성하고 각각의 이미지 소스를 지정해줍니다.
<a>에서 # (hash mark) 는 링크를 없애주는 역할을 합니다. 클랙했을 때 특정 URL로 가려는 시도를 안하게 됩니다.
onMouseOver 이벤트 핸들러는 마우스가 링크(이미지) 위에 올라올 때 이벤트를 발생시키는 속성입니다. 그리고 반대로 onMouseOut 이벤트 핸들러는 마우스가 링크(이미지)밖으로 나갈 때 이벤트를 발생시킵니다.

직접 테스트해보고 이것저것 바꿔서도 해보세요. 그래야 실력이 생깁니다. 개발자로서의 힘이 생기는 거죠.

게임케릭터한테 아이템만 사주지 말고 여러분의 힘을 길러보세요.

Reference : http://www.tutorialspoint.com/javascript/javascript_animation.htm

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

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #21 - Navigator ( 브라우저 판별/구분하기 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #20 - Multimedia ( 멀티미디어, 음악, 동영상 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #18 - Validation ( 유효성 검사 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #17 - Error Handling ( 예외 처리 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #16 - Object ( 객체 ) (0)	2015.08.05

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #19 - Animation ( 애니메이션 )

수동적 애니메이션

자동 애니메이션

마우스 이벤트를 이용한 애니메이션

'💻 Programming > Javascript' 카테고리의 다른 글

Category

Recent Posts

Recent Comments

티스토리툴바