animate(), 요소를 움직이기

animate

원문 링크 http://api.jquery.com/animate/

.animate( properties [, duration] [, easing] [, complete] )Returns : jQuery

개요 : CSS 속성들을 이용하여 사용자 에니메이션을 수행합니다.

• .animate( properties [, duration] [, easing] [, complete] )
• properties 움직임을 만들어 낼수 있는 CSS 속성들
• duration 움직임이 발생할 시간
• easing 움직임에 변화를 줄 수 있는 함수
• complete 움직임이 멈춘 후 실행될 함수
• .animate( properties, options )
• properties 움직임을 만들어 낼수 있는 CSS 속성들
• options A map of additional options to pass to the method. Supported keys:
• duration: 움직임이 발생할 시간
• easing: 움직임에 변화를 줄 수 있는 함수
• complete: 움직임이 멈춘 후 실행될 함수
• step: 움직임 각 스텝별로 실행될 함수
• queue: 애니메이션 효과는 순서대로 발생합니다. 만약 false로 하면 동시에 같이 움직임이 일어납니다.
• specialEasing: CSS 속성의 하나 이상을 특별한 효과로 처리합니다. (added 1.4).

.animate() 함수는 수치 CSS 속성을 제어하여 에니메이션(움직임) 효과를 만들어 냅니다. 반드시 CSS 속성 맵 데이터를 필요로 합니다. 이 데이터 맵은 .css() 함수에 인자로 사용하는 데이터 맵과 유사합니다. 단 조금 더 제약이 있습니다.

애니메이션 속성과 값 ( Animation Properties and Values )

모든 움직임에 관련된 속성들은 단수 수치 값(single numeric value)을 이용해서 움직임을 줄 수 있습니다. 대신 비수치형 속성값들로는 애니메이션 효과를 줄 수 없습니다. jQuery의 기본 기능으로도 움직임을 줄 수 있는데, width, height, left 와 같은 수치형 기능제어가 그에 해당하고 background-color 와 같은 것은 사용이 불가합니다. 속성 값들은 픽셀단위로 제어할 수 있습니다. em 과 % 같은 값들도 지원해줍니다.

스타일 속성 뿐만 아니라, 비 스타일 속성들(scrollTop, scrollLeft, 그리고 사용자 정의 속성 같은) 들도 애니메이션 효과에 사용할 수 있습니다.

줄임표현 CSS 속성들(font, background, border 등)은 완벽히 지원하지 못합니다. 예를들어, 당신이 border 스타일을 바꾸고 싶다면 border sytle 또는 border width와 같이 명확한 속성을 사용해야 합니다. 또 하나의 예를 보면, font의 사이즈를 바꾸고 싶다면 fontSize 라고 사용하거나 'font'라고 사용하지 말고 'font-size'로 사용해야 한다는 얘기입니다.

수치에 대한 속성과 더불어 'show', 'hide', 'toggle'과 같은 문자열도 사용할 수 있습니다. 이들은 요소 표시를 제어하는 동시에 애니메이션 효과에도 해당하기 때문입니다.

Note: .slideDown() 이나 .fadeIn() 같은 함수들도 애니메이션 효과를 가지고 있습니다. .animate() 함수가 효과의 일부로 숨겨진 요소를 보이게 하는 기능은 하지 못합니다. 예를 들어, $('someElement').hide().animate({height:'20px'}, 500) 같은 코드는, 움직임이 발생한 후에 눈에 보이지 않는 상태로 남아있게 됩니다.

지속 시간 ( Duration )

시간(Durations)의 기본단위는 밀리세컨드(1000분의 1초) 입니다. 높은값을 주면 느리게 움직이고 작은값을 주면 빠르게 움직입니다. 설정을 하지 않으면 기본값으로 400 밀리세컨드(milliseconds)가 세팅됩니다. 'fast' 와 'slow' 라는 문자열을 사용할 수 있는데 각각의 수치값은 200 과 600 밀리세컨드를 의미하게 됩니다.

콜백 함수 ( Complete Function )

만약 이 인자를 설정하면, 움직임이 완료된 다음에 해당하는 함수가 실행이 됩니다. 이 콜백함수는 인자를 가질 수 없습니다. 단, this 를 사용하여 움직임이 있었던 DOM 요소를 제어할 수 있습니다.

기본 사용법 ( Basic Usage )

어떤 요소를 움직이고 싶은면 간단하게 아래처럼 하면 됩니다. 이미지를 움직이고 싶다고 해보겠습니다. 아래는 마크업입니다.

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;" />

아래는 이미지의 투명도(opacity), 왼쪽 좌표값(left offset), 그리고 높이(height)를 바꾸는 내용입니다.

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

위 예제에서 height 값이 'toggle' 인것이 보이실 겁니다. 이 인자 때문에 첫번째 클릭 시 height가 0으로 수렴하면서 이미지가 축소되게 됩니다. 그리고 다시한번 클릭하면 이미지가 복구가 됩니다. 아래 이미지 처럼 말입니다. 토글의 의미 아시죠?

이미지의 투명도(opacity) 는 흐린 상태에서 복구가 되지는 않습니다. 타겟 요소의 left 값이 상대적(relative) 값 입니다. 이미지는 클릭 때마다 오른쪽으로 계속 이동하게 됩니다.

Note: jQuery UI 프로젝트에서는 .animate() 함수로 비수치 속성(colors와 같은)들도 바꿀 수 있습니다. 이 프로젝트에서는 개별적인 속성값 제어보다 더 나은 CSS 클래스 직접 제어하는 내용이 포함되어 있습니다.

Step Function

.animate() 함수 용법 중 2번째에서 step 옵션을 줄 수 있습니다. 이것은 콜백 함수인데 움직임의 스텝마다 함수가 실행되게 됩니다. 이것을 이용하면 사용자 애니메이션을 구현하거나 움직임이 진행될 때마다 알림을 주는데 유용합니다. 이 함수는 2개의 인자(now 와 fx)를 가질 수 있고, this 는 움직이는 DOM 요소를 지칭하게 됩니다..

• now: 각 스텝마다 움직임 속성에 대한 수치값
• fx: jQuery.fx 프로토타입 객체(prototype object)의 레퍼런스, elem 같은 속성값으로 수치데이터를 사용할 수 있음, start 와 end 는 움직임 속성(animated property)의 처음과 끝을 나타낸다. 그리고 prop 속성은 움직이는 요소의 속성명들이다.

step 함수는 요소가 움직일때마다 호출됩니다.

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});

어려우시죠. 실제로 코드를 돌려보셔야 아실수 있을 겁니다. 말로는 잘 이해가 안되요.

시작과 끝 효과 ( Easing )

.animate() 인자 중에 남은 하나는 속도 늦추는 함수(easing function)에 대한 내용입니다. 이 easing 함수는 속도에 대한 내용입니다. 움직임이 한쪽 끝에 닿았을때 처리되는 행동패턴에 대한 내용입니다. jQuery에서 easing 은 기본으로 swing 을 사용합니다. swing은 끝점에 가서 속도가 살짝 느려집니다. 또 하나는 속도를 그대로 유지하는 linear 입니다. easing 함수들을 정상적으로 사용하려면 plug-ins 들이 필요합니다. 대부분 jQuery UI suite 쪽에 정의되어 있습니다.

이 녀석 때문에 한참을 구글링을 했습니다. 영어로 된 자료 말고는 크게 도움이 되는게 없더군요. 요즘 스마트폰을 보시면 끝에 가서 한번 튕기는 느낌이 나지 않습니까? 바로 그걸 얘기하는 것입니다. 다음 링크를 따라가셔서 보고 오시면 아하 하실 겁니다. 명심하실건 core jQuery 만으로는 swing과 linear만 가능합니다.

easing function 이 대체 뭐임? http://jqueryui.com/demos/effect/easing.html
다른 사이트 보기 : http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations

속성별 Easing ( Per-property Easing )

jQuery 1.4 부터, 단일 .animate() 호출 시 속성별로 easing 함수를 사용할 수 있게 되었습니다. .animate()의 초기 버젼에서는, 각 속성에 배열 형태로 값을 줄 수 있었습니다. 첫번째 인자로 속성명을 두번째 인자로 easing 함수를 사용하는 것입니다. 만약 특정 속성에 easing 함수를 정의하지 않으면 .animate() 함수의 easing 대표 인자가 적용되게 됩니다. 만일 그 easing 인자마저도 생략하면 기본적으로 swing 함수를 사용하게 됩니다.

예를 들어, width 와 height 는 swing easing 함수를 사용하고 opacity 는 linear easing 함수를 사용하고 싶으면 아래처럼 하시면 됩니다.

$('#clickme').click(function() {
  $('#book').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function() {
      $(this).after('<div>Animation complete.</div>');
  });
});

위 예제를 혹시라도 실행해 보시면 별로 티가 나지 않습니다. 저도 한참 들여다 보고 안거니까요. 기억할건 딱 하나 easing 인자를 생략하면 끝에 가서 속도가 느려지는 swing이라는 함수가 자동으로 탄다는 것입니다.

.animate() 함수의 두번째 버젼에서는, specialEasing 이라는 속성을 사용할 수 있게 되었습니다. 예를 들어, width 에는 linear easing 함수를 사용하고 height 는 easeOutBounce easing 함수를 사용하려면 아래와 같이 합니다. 단, easeOutBounce 를 사용하려면 해당 플러그인이 있어야 합니다.

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

휴 좀 긴 내용이었습니다. 그만큼 사용을 많이 한다는 거겠죠. 다른건 필요없고 아래 예제들만 잘 활용하시면 뭐 큰 문제는 없을 것 같습니다.

예 제  
클릭하면 여러 속성값들을 변화시켜 요소를 움직입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>

<div id="block">Hello!</div>
<script>

/* Using multiple unit types within one animation. */

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script>

</body>
</html>

미리보기

기본적인 사용방법 입니다.

 

예 제  
왼쪽 좌표를 변화시켜 요소를 좌우로 움직이게 합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

</script>

</body>
</html>

미리보기

+=, -= 사용하는 방법을 눈여겨 보시면 되겠네요.

 

예 제  
버튼에 따라 에니메이션을 각각 실행합니다. 자세한 설명은 아래에

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  background-color:#bca;
  width:200px;
  height:1.1em;
  text-align:center;
  border:2px solid green;
  margin:3px;
  font-size:14px;
}
button {
  font-size:14px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>

<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>

$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});

$( "#go2" ).click(function(){
  $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );
});

$( "#go3" ).click(function(){
  $( "#go1" ).add( "#go2" ).click();
});

$( "#go4" ).click(function(){
  $( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});

</script>

</body>
</html>

미리보기

이 예제의 핵심은 queue 에 false가 세팅되었다는 것입니다. 버튼1은 false가 되어 있어서 각각의 animation 함수가 동시에 실행되지만 버튼 2는 단계별로 실행됩니다. 잘 보시면 2번째는 쭈욱 오른쪽으로 늘어난 후에 아래로 늘어나는 것을 보실 수 있을 겁니다.

 

예 제  
한번의 움직임이 끝난 후에 step 함수를 실행합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
div {
   position: relative;
   background-color: #abc;
   width: 40px;
   height: 40px;
   float: left;
   margin: 5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<p><button id="go">Run »</button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>

<script>
$( "#go" ).click(function(){
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});
</script>

</body>
</html>

미리보기

좀 어렵습니다. 굳이 이렇게 할 필요는 없는데 예제를 위한 예제니까요. 먼저 제일 앞의 div를 움직입니다. 100만큼 이동이 끝나면 인덱스가 0이상인 div 모두를 now 즉, 100만큼 모두 이동시키는 step 함수가 실행되게 되는것 입니다. 그냥 모두 한번에 움직인것 같지만 사실은 아니네요.

 

예 제  
모든 p 태그의 높이(height) 와 투명도(opacity)를 토글합니다. slow는 600 밀리세컨드 즉, 0.6초를 의미합니다.

$( "p" ).animate({
  height: "toggle", opacity: "toggle"
}, "slow" );

 

예 제  
모든 p 태그를 오른쪽으로 50만큼 그리고 투명도를 1로 합니다. 투명도 1은 visible 입니다.

$( "p" ).animate({
  left: 50, opacity: 1
}, 500 );

 

예 제  
왼쪽 좌표(left)와 투명도(opacity)를 동시에 변화 시킵니다.

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false });

 

예 제  
easing 함수를 사용합니다. 플러그인이 필요합니다. show 가 되어 있지만 hidden 인 요소가 보이게 되지는 않습니다.

$( "p" ).animate({
  opacity: "show"
}, "slow", "easein" );

 

예 제  
모든 p 태그의 높이와 투명도가 600 밀리세컨드 기준으로 토글됩니다. slow는 0.6초 입니다.

$( "p" ).animate({
  height: "toggle", opacity: "toggle"
}, { duration: "slow" });

 

예 제  
easing 함수를 실행합니다. 플러그인이 필요합니다.

$( "p" ).animate({
  opacity: "show"
}, { duration: "slow", easing: "easein" });

 

예 제  
모든 P 태그를 움직이고 콜백함수를 실행시켜 알림창을 보여줍니다. easing 함수를 linear로 세팅합니다.

$( "p" ).animate({
  height: 200, width: 400, opacity: 0.5
}, 1000, "linear", function() {
  alert("all done");
});

 

후~ 이제 끝났네요. 어떻게 했는지 모르겠습니다. 정신이 하나도 없네요. 그냥 예제만 올릴까 하다가 그냥 쭈욱 해봤습니다. 오타도 많을거 같고 문맥도 무지 이상할 것 같습니다. 어쨌든 jQuery 를 사용하는 궁극적인 목표이기도 하죠. 요소를 동적으로 움직이게 하는 것 말이죠. 예전 웹에서는 상상도 못할 일 이었습니다. 그런 의미로 고마워요. jQuery!!

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.