제이쿼리 애니메이션 UI

제이쿼리에선 animate라는 함수가 있다.

$('.box').animate({ marginLeft : '100px', marginTop : '90px' }, 1000);

이런 식으로, 셀렉터에 .animate({  })를 붙이는 게 기본 형태이고 { }는 object자료형이라고 하는데 이 자료형 안에서 애니메이션에 줄 속성을 ,(콤마)로 나열하면 된다. 이때 우측엔 문자 형태로 '100px' 이렇게 준다. 그리고 뒤에 1000은 1초를 뜻하며 ms단위이다.

animate 함수를 이용해 간단한 애니메이션을 만들어보자

<div class="left-menu">
<p>Menu Title</p>
</div>
<button id="show-menu">버튼</button>

이렇게 옆에서 나올 메뉴바와 버튼을 만들어 준 후,

.left-menu {
  width : 150px;
  height : 100%;
  background : black;
  color : white;
  position : fixed;
  margin-left: -150px;
}
#show-menu {
  margin-left: 200px;
}

left-menu를 넓이와 높이를 주고 position: fixed를 줘서 사이드바와 같은 느낌으로 만든 후, 평소엔 화면에서 사라지게 margin-left를 넓이만큼 준다. 그런 다음, 버튼을 누르면 나타나게 해보자.

$('#show-menu').on('click', function() {
  $('.left-menu').animate({ marginLeft : '0px' });
});

이런 식으로, 제이쿼리를 짜면 버튼을 눌렀을 때 사이드 바가 움직인다.

 

하지만, 만약 버튼 클릭 시 순위를 정해서 실행해야 할 때가 있다. 예를 들면,

$('#login').on('click', function(){
  $('.black-background').show();
  $('.black-background').animate({ marginTop : '0px' });
});

#login이라는 아이디를 가진 버튼을 누르면 black-background가 display: none이였던 것을 먼저 show() 로 보여준 다음 animate로 marginTop를 조정해 위에서 아래로 내려오게 하고 싶다. 이럴때 보통은 순서대로 진행되지만 아닐때가 있다. 그래서 같은 요소일 땐

$('.black-background').show().animate({ marginTop : '0px' });

이렇게 써줄 수 있고, 다른 요소일 땐

$('이 요소').animate({ width: '250px'}, 1000, function() {
  $('저 요소').animate({ height : '500px'}  });
});

이렇게 animate의 세번째 자리에 function을 추가해서 이요소 부터 animate 해주시고 다음에 저요소 animate 해주세요 이렇게 사용할 수 있다. 

 

사실, 애니메이션은 css의 transition 속성을 이용하는게 더 좋다.

.box {
  margin-top : 100px;
  transition : all 1s;
}

이렇게 주고 margin-top: 0px 으로 변경시키면 transition은 저기에 변화가 생기면 모두 1초동안 생기게하란 뜻이다. transition을 사용하면 자바스크립트와 독립적으로 동작하기 때문에 실행속도에서 훨씬 유리하다. 그리고 변화를 만들땐  클래스를 미리 만들어놓고 addClass 기술을 이용해 클래스를 추가했다가 삭제했다가 하는게 훨씬 깔끔하다.

 

그리고 margin 속성보단 transform을 이용하는게 낫다. margin은 화면 자체 레이아웃을 변경하는 속성이라 랜더링시간이 오래 걸린다.

transform : translateX(100px);
transform : rotate(30deg);
transform : scale(2);

이런 식으로, transform : 바꿀거(바꿀양); 적어서 margin보다 여러가지 형식으로 바꿀 수 있다.