jQuery: 애니메이션

jQuery는 웹화면에서 visual effect를 간편하게 만들고 변경할 수 있게 도와 줍니다. 이런 visual effect는 웹 화면에 대한 사용자의 만족도를 높이는 방법 중에 하나입니다. 오늘은 jQuery Animation 프레임워크를 살펴 보겠습니다.

1. jQuery Animation 프레임 워크의 일반적인 특징

애니메이션은 얼마만큼의 시간동안 visual effect를 나타내야 하는지를 지정해야 합니다. 그 시간은 ms(1/1000초)로 나타내거나 지정되어 있는 문자열로 나타낼 수 있습니다. jQuery에서 기본적으로 지정되어 있는 문자열은 "fast", "slow"가 있습니다. ("fast" = 200ms, "slow" = 600ms)그 외의 문자열 지정법은 jQuery.fx.speeds 에 문자열/숫자로 매핑하여 정의할 수 있습니다. 만약 그외의 jQuery가 인지하지 못하는 문자열을 지정 한다면 기본값인 400ms가 지정 됩니다.

//지정 속도 문자열 등록법
jQuery.fx.speeds["지정할문자열"] = 지정할ms;
//veryFast 를 100ms 로 등록
jQuery.fx.speeds["veryFast"] = 100;

jQuery의 visual effect는 비동기 방식으로 실행이 되고 visual effect 메소드의 대부분은 첫 번째 전달인자는 지속시간, 두 번째 전달인자는 콜백 함수(애니메이션종료후에 실행할 함수)를 쓸 수 있습니다.

비동기 방식의 애니메이션 메소드를 호출하면, 바로 반환값을 주고 애니메이션은 background에서 수행됩니다. 비동기 방식의 메소드는 애니메이션이 종료되기전에 바로 반환값을 돌려주므로 다음에 나타낼 visual effect 메소드를 추가로 설정할 수 있습니다. 이런 애니메이션은 기본적으로 실행 대기열에 쌓여서 이미 애니메이션 되고 있는 요소가끝날 때까지 미루다가 끝난 후에 동작합니다.

반짝이는 애니메이션

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Animation</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="flicker" style=" width:200px; height:200px; background-color: #ff0000;"></div>

    <script type="text/javascript">

        /**
         * 깜빡이는 예제
         * flicker라는 Id를 가진 엘리먼트에 7개의 애니메이션 함수를 적용하였습니다.
         * 7개의 visual effect는 실행 대기열에 쌓여서 앞의 애니메이션 함수가 끝난후에 바로 동작을 합니다.
         */
        $("#flicker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();

    </script>
</body>
</html>

위에서 알아 본 것처럼 jQuery visual effect 관련 메소드들은 모두 지속시간과 콜백 함수를 전달 인자로 받습니다. 그 전달인자를 객체에 프로퍼티로 담아서 넘길 수 있습니다.

//객체 프로퍼티로 지속 시간과 콜백 함수를 전달
$("#fadeIn").fadeIn({
    //지속시간
    duration : 100,
    //콜백함수
    complete : function(){$(this).text("jQuery Animation!!")}
});

객체 프로퍼티로 전달을 하는 방법은 사용자 정의 애니메이션인 animate() 메소드에서 일반적으로 사용 합니다. 객체 프로퍼티의 옵션 객체를 사용하면 옵션을 더 지정할 수 있습니다. 옵션 객체는 4.2절에서 자세히 알아 보겠습니다.

2.기본 visual effect 메소드

visual effect 메소드는 기본적으로 단순하게 엘리먼트들을 보여주고 감추는 메소드가 있습니다. 문서 레이아웃을 보여주고 감추는 방식의 차이를 크게 세 가지로 분류해서 간단하게 알아 보겠습니다.

fadeIn(), fadeOut(), fadeTo()
엘리먼트들을 알파값(불투명도)을 조절하는 CSS opacity 프로퍼티를 사용하여 보여주고 감춥니다. fadeTo는 현재의 알파값에서 지정한 알파값으로 애니메이션 됩니다.

show(), hide(), toggle()
엘리먼트들의 width 값, height 값, 알파값을 이용해 문서 레이아웃에서 요소를 보여주고 감춥니다. toggle은 실행된 요소의 보여지는 상태를 전환 해줍니다.

slideDown(), slideUp(), slideToggle()
엘리먼트들의 높이값을 이용해 위 아래로 슬라이드를 하게 해줍니다. 그리고 CSS display 프로퍼티를 사용하여 엘리먼트의 영역을 보여주고 감춥니다.

기본적인 메소드 이용한 애니메이션

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Animation</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="logoImg" style="width:200px; height:200px; background-color: #ff0000;"></div>

    <script type="text/javascript">
        /**
         * 기본적인 visual effect 메소드들을 사용한 애니메이션 예제
         */
        $("#logoImg").hide(600).show(600).slideUp("slow").slideDown(1000).hide(400);

    </script>
</body>
</html>

visual effect 메소드는 여러 jQuery 플러그인을 이용해 확장할 수 있습니다. 또한 jQuery UI 라이브러리는 종합적인 visual effect 세트를 제공해 줍니다. 사용법은 http://jqueryui.com의 다운로드 페이지에서 다운을 받아 스크립트 파일을 추가한 후 사용하시면 됩니다. 자세한 내용은 해당 사이트를 참고하세요.

3. 실행 대기열 관련 메소드

jQuery에서는 실행 대기열 관련 메소드로 visual effect를 제어할 수 있습니다.

첫 번째로 stop() 이라는 메소드는 2개의 불리언 값을 받는 메소드로 선택된 엘리먼트의 실행중인 애니메이션을 중단하는 함수 입니다. 첫 번째 인자값은 선택된 엘리먼트의 대기열을 비울 것인지 설정 해주는 값 입니다. 기본 값은 false로 생략이 가능하고 생략시 대기중인 애니메이션은 취소가 되지 않습니다. 두 번째 인자 값은 stop() 메소드가 실행된 시점에서의 CSS 프로퍼티를 유지할지 아니면 최종 값으로 바꿀지를 설정해 주는 값입니다.
예를들어 보겠습니다. 엘리먼트가 우측으로 100만큼 이동하는 애니메이션중에서 50위치에 stop() 메소드가 실행되었다고 가정해보겠습니다. stop()의 인자값이 true이면 즉시 100으로 이동 시키고 false이면 50으로 유지 시킵니다.

/**
 * stop() 사용법
 * stop()의 첫 번째 인자는 생략가능 합니다. 생략시 fasle가 인자로 적용 됩니다
 */
.stop('대기열을 비울것에 대한 불리언 값', '최종 값으로 변경할지에 대한 불리언 값')

* 1.9 버전부터 finish() 메소드가 추가 되었는데 이는 대기열 명을 인자값으로 가지면서 .stop(true,true)와 같은 기능입니다.

두 번째로 delay() 라는 메소드는 실행 대기열 시간에 입력받은 값 만큼 지연 값을 추가 해주는 메소드 입니다. 첫 번째 전달 인자는 다른 함수와 동일하게 ms단위의 지연 시간이나 지정된 문자열 입니다. 두 번째 전달 인자는 대기열 명이고 필수 값은 아닙니다. 대기열 명을 따로 관리하기 위해 지정하지 않았다면 대기열 명을 적을 필요는 없습니다.

delay()사용 애니메이션

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Animation</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="logoImg" style="width:200px; height:200px; background-color: #0000ff;"></div>

    <script type="text/javascript">

        /**
         * delay() 사용한 애니메이션 예제
         * logoImg 라는 아이디를 가진 엘리먼트의 투명도를 흐리게 바꾼 후 쓸어올렸다가
         * 1초 기다린 후에 다시 쓸어 내리는 애니메이션
         */
        $("#logoImg").fadeTo(400, 0.2).slideUp(200).delay(1000).slideToggle().fadeTo(400, 0.8);

    </script>
</body>
</html>

* 마우스 관련 이벤트 애니메이션을 만들 때 애니메이션에 딜레이 시간을 적용해 두면 마우스가 이벤트 엘리먼트 위를 빠르게 지나갈 때 애니메이션이 실행되는 것을 막을 수 있습니다. 마지막으로 jQuery의 대기열 메커니즘과 관련된 queue(), dequeue(), clearQueue() 가있습니다. queue() 메소드는 대기열에 새로운 함수를 추가할 때 사용합니다. queue()에 함수의 배열을 전달 인자로 넘기면 현재 대기열을 교체 해버리고, 전달 인자 없이 queue() 메소드를 호출하면 현재 실행 대기열을 반환 해줍니다. 주의점은 인자로 넘겼던 함수의 내용이 끝날 때 함수 안에서 인자로 넘긴 함수를 호출해 주어야만 실행 대기열의 다음 작업으로 넘어가므로 호출해 주어야 합니다. 그렇지 않으면 deQueue()를 사용하면 됩니다. clearQueue()는 대기열을 비워주는 기능을 합니다.

4. 사용자 정의 애니메이션

사용자 정의 애니메이션을 사용 하려면 animate() 메소드를 사용하면 됩니다. animate() 메소드는 단순한 visual effect 매서드가 제공 하는것 보다 더 복잡한 visual effect를 만들 수 있습니다. animate()의 첫 번째 전달 인자는 어떤 효과를 애니메이션 할 것인지 정해 주고, 두 번째전달 인자는 어떻게 애니메이션 할 것인지 정해 줍니다.

첫 번째 전달 인자는 필수 값 입니다. 첫 번째 전달 인자에는 CSS 속성과 값을 프로퍼티로 지정한 객체를 넘겨줘야 합니다. 이때 animate() 메소드는 현재 CSS의 속성값을 사용자가 전달한 CSS 값으로 애니메이션을 실행합니다.
두 번째 전달 인자는 필수 값이 아닙니다. 두 번째 전달 인자에는 애니메이션의 옵션 객체를 넘길 수 있습니다. 이때 옵션 객체를 넘기지 않고 가장 많이 사용되는 옵션인 지속 시간, easing 함수명, 콜백 함수를 차례대로 넘겨줄 수 있습니다.

//프로퍼티 객체만 있을 때
$("#엘리먼트ID").animate({프로퍼티객체});

//옵션 객체를 넘길 때
$("#엘리먼트ID").animate({프로퍼티객체}, {옵션객체});

//가장 많이 사용되는 옵션 세개를 넘길 때
$("#엘리먼트ID").animate({프로퍼티객체}, 지속시간, easing함수명 , 콜백함수(생략가능));

애니메이션의 프로퍼티 객체와 옵션 객체는 4.1, 4.2절 에서 자세히 알아보겠습니다.

easting 함수란?

전체 애니메이션의 적용시간 비율을 원하는 진행 비율로 매핑을 하는 함수 입니다.
기본 easing 함수는 기본적으로 사인곡선을 표현 해줍니다. 느리게 시작해 빠르게 진행 되다가 나중에 다시 느려집니다. 그 사인곡선을 나타내는 값은 "swing"이고 "linear"라는 이름의 평범한 선형 easing 함수도 있습니다. 그리고 애니메이션의 속도 값을 문자열로 지정 하듯이 jQuery.easing 객체로 사용자 정의 easing 함수도 추가할 수 있습니다. jQuery UI 라이브러리가 확장 easing 함수들을 보유하고 있습니다.

// easting 함수 설정법
jQuery.easing["지정할문자열"] = 지정할값;

// 제곱의 속도로 증가
jQuery.easing["squareRoot"] = Math.sqrt;

4.1 애니메이션 프로퍼티 객체

animate()의 첫 번째 전달인자에는 객체만 넘길 수 있습니다. 객체의 프로퍼티명은 CSS속성명이고, 프로퍼티 값은 현재의 값에서 애니메이션 되어야 할 값을 지정해주면 됩니다. 프로퍼티에는 숫자형만 가능하므로 폰트, display등의 문자형(문자열을열거하는방식)은 불가능 합니다. 숫자형 값은 px로 가정하고 상대값으로 지정을 하고 싶을 때에는 값 앞에 접두사로 감소시에는"-=", 증가시에는 "+=" 을 붙여주면 됩니다.
주의점은 프로퍼티명에 margin-top 같이 하이픈(-)이 들어가는 경우가 생길 수 있습니다. 그러나 JavaScript에서는 프로퍼티명에 하이픈을 사용할 수 없기 때문에 프로퍼티명을 따옴표("") 안에 작성해줘야 합니다.
프로퍼티의 값에 대해 추가로 알아보자면 숫자형만이 아닌 jQuery 애니메이션에서 지원하는 show, hide, toggle을 사용하면 현재 애니메이션이 끝난 후에 show() , hide() 메소드를 호출합니다.

4.2 애니메이션 옵션 객체

애니메이션의 옵션 객체는 필수 요소는 아닙니다. 옵션 객체에는 애니메이션 실행 방법을 지정한 옵션이 들어 있으며 jQuery버전에 따라 계속 추가되고 있습니다. 주로 사용되는 옵션은 위에서 설명 했었던 duration, complete, easing 메소드들과 애니메이션을 실행시에 대기열에 담을 지를 정하는 queue등이 있습니다. "queue : false" 가 옵션으로 추가되면 대기열에 등록이 되지 않게 됩니다. 대기열에 등록되지 않은 애니메이션은 바로 시작이 되고 대기열에 있는 다른 애니메이션과는 서로 연관 관계가 없어 집니다.

사용자 정의 함수 애니메이션

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Animation</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="logoImg" style="width:20px; height:20px; background-color: #0000ff;"></div>

    <script type="text/javascript">

        /**
         * 사용자 정의 애니메이션 예제
         */
        $("#logoImg")
                //너비 300 증가, 높이 400증가, 1000ms 동안 사인곡선 형태의 상대적 속도로 애니메이션
                .animate({"width":"+=300", "height":"+=400"}, {duration: 1000, easing:"swing"})
                //투명도 0.2로 변경, 너비 200 감소, 높이 100 감소, 1000ms 동안 사인곡선 형태의 상대적 속도 애니메이션
                .animate({"opacity":".2", "width":"-=200", "height":"-=100"}, 1000, "swing")
                //투명도 0으로 변경, 높이 320 감소 200ms 동안 선형의 상대적 속도 애니메이션
                .animate({"opacity":".0", "height":"-=320"}, {duration: 200, easing:"linear"})
                //딜레이 600ms
                .delay(600)
                //투명도 0.6으로 변경, 높이 200증가, 너비 100감소 800ms 동안 선형의 상대적 속도 애니메이션
                .animate({"opacity":".6", "height":"+=200", "width":"-=100"}, {duration: 800, easing:"linear"})
                //투명도 0.9으로 변경, 높이 200증가, 500ms 동안 선형의 상대적 속도 애니메이션
                .animate({"opacity":".9", "width":"+=200"}, {duration: 500, easing:"linear"});
                //투명도 1으로 변경, 높이 20으로 변경, 너비 20으로 변경, 500ms 동안 선형의 상대적 속도 애니메이션
                .animate({"opacity":"1", "width":"20", "height":"20"}, {duration: 500, easing:"linear"});

    </script>
</body>
</html>

* jQuery는 버전이 계속 발전해 나가고 있습니다. 이 글은 1.4 이상 기준으로 작성 되었습니다.

참고 문헌 및 사이트

JavaScript The Definitive Guide 6/E
http://api.jquery.com/

namoosori

안녕하세요. 나무소리 입니다. 나무소리는 넥스트리(주)의 교육 브랜드 입니다.넥스트리가 지난 20년 동안 쌓아온 개발 및 교육 경험들을 나무소리를 통해 많은 분들과 공유 하려고 합니다.앞으로 저희 나무소리를 통해 보다 나은 교육을 경험 하실 수 있도록 구성원 모두 최선을 다하겠습니다.

YouTube