javascript 로 애니메이션 움직임 만들기

jquery를 이용하면 웹에서도 멋진 동적 애니메이션을 쉽게 넣을수 있다.

하지만 이런 jquery를 가능하게 하는것은 역시 javascript다. 

당연한말이지만 jquery는 javascript 기반의 라이브러리이기 때문이다...

즉, jquery로 할수 있는 모든 동작은 javascript로도 가능하는것이다.

조금 어렵지만 말이다.

하지만 기본을 알면 무한발전이 가능한법~ㅎㅎ

나는 jquery없이 javascript로 멋진 애니메이션을 만들어보기로 했다..

jquery라는 쉬운 도구가 있는데 왜 굳이 javascript로 뻘짓을 하느냐고 할수도 있겠지만 난 원래 뻘짓을 좋아한다ㅎㅎㅎ

애니메이션의 가장 기본적인 구조는 반복이다...

게임엔진이 아닌 실제 코딩으로 게임을 만들어 본 사람은 알겠지만 게임과 같은 애니메이션동작은 다 쓰레드에 의한 반복구조이다...

이는 javascript에서도 예외는 아니다.

나는 이구조를 위해서 setTimeout(function, time)라는 기본함수를 이용했다.

(물론 나만 사용하는 방법은 아니다ㅎㅎ)

function moveText(id, src, textid, left) {

if(navigator.appName == "Netscape") {

var object = document.getElementById(textid);

if(changeImage(id, src)) {

var margin = 100;

function move() {

if ((margin+=5) < 200) {

if(left)

object.style.marginRight = margin + 'px';

else

object.style.marginLeft = margin + 'px';

setTimeout(move, 10);

}

}

document.getElementById('menutext').style.visibility = "visible";

object.style.visibility = "visible";

move();

}

}

else

changeImage(id, src);

}

위 내용은 실제 내 홈페이지에서 마우스를 아이콘 위에 가져갈때 글자가 이동하는 소스이다

http://www.gyjmobile.com

이 함수가 호출되면 안에 있는 move() 함수가 실행된다..

move()는 margin을 5 증가시켜 객체를 이동시킨다. 그리고 setTimeout(move, 10)을 호출해 move()함수를 0.01초후 다시 실행시킨다(재귀함수).

이 반복은 margin이 200이 될때까지만 계속된다. 

즉, 0에서 200까지 이동하게 되는것이다~

이렇듯 원리는 아주 간단하다... 하지만 난 이걸 할려고 하루동안 모니터만 보고 있었다ㅎㅎ

참고로 익스플로러에서 동작이 부자연스러워 분기문으로 빼버렸다...

익스플로러는 안되는게 너무 많으니ㅎㅎ 크롬이나 사파리에서 해보길 권장해요~

 

	매몰: 고영진  1인 개발자
실패만 하고 있어도 꿈을 포기하지 않는 남자.       제가 직접 경험하고 습득한 지식을 위주로 올릴게요.