Please Enable JavaScript!
Gon[ Enable JavaScript ]

자바스크립트(Javascript) 애니메니션 이용하기

웹 프로그래밍/자바스크립트
반응형

자바스크립트(Javascript) 애니메니션 이용하기

 

개발환경 : window 7 64bit, Explorer 11

 

애니메이션 효과는 불꽃놀이, 페이드 효과

장애인용, 객체의 움직임 제어등 다양합니다.

이것을 어떻게 활용하느냐에 따라 색다르고

멋진 사이트를 꾸밀수 있습니다.

 

자바스크립트는 논리 방정식이나 함수를 통해

DOM 요소를 이동시키면서 다양한 효과를

낼수 있는데 이것이 애니메이션입니다.

애니메이션에 사용되는 함수는 주로

setTimeout, setInterval 입니다.

 

l  setTimeout(함수, 시간) : 첫번째 인수로 들어가는

함수를 두번째 인수로 넣은 시간 이후에 반복실행이

됩니다. 시간은 밀리세컨드가 됩니다.

l  setInterval(함수, 시간) ; 첫번째 인수로 들어간 함수를

일정한 시간이 지났을 때 실행하는 함수입니다.

이것은 반복이 아니라 한번 실행하고 끝나는 함수입니다.

l  clearTimeout(타임아웃객체) : 타임아웃으로 설정한

객체를 인수로 넣어 타이머를 종료합니다. 인수로 들어가는

타임아웃객체는 setTimout의 리턴값입니다.

 

아래 예제는 아주 간단한 애니메이션 효과 입니다.

버튼을 클릭할 때 마다 이미지를 정한 크기 만큼

움직이는 예제입니다. getElementById 를 이용해 태그의

동일한 Id 가 있는지 찾습니다.

getElementById 로 객체를 리턴 받았으면 moveRight()

함수를 이용해 현재 위치에서 10px 만큼 오른쪽으로

옮기게 됩니다.

 

<html>

<head>

<title>애니메이션 효과</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="ani.jpg" />

<p>클릭하시면 오른쪽으로 10px 만큼 이동합니다. </p>

<input type="button" value="Click Me" onclick="moveRight();" />

</form>

</body>

</html>

 

자바스크립트(Javascript) 애니메니션 이용하기

 

다음은 좀더 복잡하게 구성해 봅니다.

사용자가 클릭하는 것이 아니라 자동으로

움직이게 합니다.

자동으로 움직이게 하기 위해 setTimout()

함수를 사용하였습니다. 시작 버튼을 누르게

되면 오른쪽으로 끝도 없이 설정한 시간 만큼

계속해서 움직일 것입니다.

 

<html>

<head>

<title>애니메이션 효과</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); // call moveRight in 20msec

}

function stop(){

   clearTimeout(animate);

   imgObj.style.left = '0px';

}

window.onload =init;

//-->

</script>

</head>

<body>

<form>

<img id="myImage" src="ani.jpg" />

<p>시작을 클릭하시면 설정한 시간만큼 무한반복 해서 움직입니다.</p>

<input type="button" value="시작" onclick="moveRight();" />

<input type="button" value="종료" onclick="stop();" />

</form>

</body>

</html>

 

자바스크립트(Javascript) 애니메니션 이용하기

 

아래 예제는 애니메이션의 또 다른 샘플입니다.

객체에 마우스가 올라가고 내려갈 때 이미지가

변화는 예제 입니다.

Href 태그에 onMouseOver 와 onMouseOut 이벤트에

이미지 URL 을 셋팅하면 됩니다.

 

<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 = "ani.jpg";

    var image2 = new Image();      // Preload second image

    image2.src = "ani2.png";

}

//-->

</script>

</head>

<body>

<p>마우스를 이미지로 옮기면 바뀌게 됩니다.</p>

<a href="#" onMouseOver="document.myImage.src=image2.src;"

            onMouseOut="document.myImage.src=image1.src;">

<img name="myImage" src="ani.jpg" />

</a>

</body>

</html>

 

자바스크립트(Javascript) 애니메니션 이용하기

 

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

'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글

자바스크립트(Javascript) 쿠키(Cookies) 란 무엇인가  (3) 2016.10.26
자바스크립트(Javascript) 문자열 자르기 위한 함수 substring()  (0) 2015.01.06
자바스크립트(Javascript) 문자열 자르기 위한 함수 Split  (0) 2015.01.02
자바스크립트(Javascript) 멀티미디어 이용하기  (0) 2014.12.30
자바스크립트(Javascript) 폼(Form) 에 입력된 값의 유효성 체크  (0) 2014.11.15
자바스크립트(Javascript) 에러와 런타임오류 다루기  (0) 2014.10.19
자바스크립트(Javascript) Objects 객체의 사용법  (0) 2014.10.15
자바스크립트(Javascript) print 함수를 이용해 웹페이지 인쇄하기  (0) 2014.10.14
Posted by 녹두장군1
,

티스토리툴바