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 메서드를 추가로 설정 해줄 수 있습니다. 이런 애니메이션은 기본적으로 실행 대기열에 쌓여서 이미 애니메이션 되고 있는 요소가끝날 때까지 미루다가 끝난 후에 동작을 하게 됩니다.
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단위의 지연 시간이나 지정된 문자열 입니다. 두 번째 전달 인자는 대기열 명이고 필수 값은 아닙니다. 대기열 명을 따로 관리하기 위해 지정하지 않았다면 대기열 명을 적을 필요는 없습니다.
* 마우스 관련 이벤트 애니메이션을 만들 때 애니메이션에 딜레이 시간을 적용해 두면 마우스가 이벤트 엘리먼트 위를 빠르게 지나갈 때 애니메이션이 실행되는 것을 막을 수 있습니다.
마지막으로 jQuery의 대기열 메커니즘과 관련된 queue(), dequeue(), clearQueue() 가있습니다. queue() 메서드는 대기열에 새로운 함수를 추가할 때 사용이 됩니다. queue()에 함수의 배열을 전달 인자로 넘기면 현재 대기열을 교체 해버리고, 전달 인자 없이 queue() 메서드를 호출하면 현재 실행 대기열을 반환 해줍니다. 주의점은 인자로 넘겼던 함수의 내용이 끝날 때 함수 안에서 인자로 넘긴 함수를 호출해 주어야만 실행 대기열의 다음 작업으로 넘어가므로 호출해 주어야 합니다. 그렇지 않으면 deQueue()를 사용해 주시면 됩니다. clearQueue()는 대기열을 비워주는 기능을 합니다.
4. 사용자 정의 애니메이션
사용자 정의 애니메이션을 사용 하려면 animate() 메서드를 사용하면 됩니다. animate() 메서드는 단순한 visual effect 매서드가 제공 하는것 보다 더 복잡한 visual effect를 만들 수 있습니다. animate()의 첫 번째 전달 인자는 어떤 효과를 애니메이션 할 것인지 정해 주고, 두 번째전달 인자는 어떻게 애니메이션 할 것인지 정해 줍니다.
첫 번째 전달 인자는 필수 값 입니다. 첫 번째 전달 인자에는 CSS 속성과 값을 프로퍼티로 지정한 객체를 넘겨줘야 합니다. 이때 animate() 메서드는 현재 CSS의 속성값을 사용자가 전달한 CSS 값으로 애니메이션합니다.
두 번째 전달 인자는 필수 값이 아닙니다. 두 번째 전달 인자에는 애니메이션의 옵션 객체를 넘길 수 있습니다. 이때 옵션 객체를 넘기지 않고 가장 많이 사용되는 옵션인 지속 시간, 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 애니메이션 프로퍼티객체
첫 번째 전달인자에는 객체만 넘길 수 있습니다. 객체의 프로퍼티명은 CSS속성명이고, 프로퍼티 값은 현재의 값에서 애니메이션 되어야 할 값을 지정해주면 됩니다. 프로퍼티에는 숫자형만 가능하므로 폰트, display등의 문자형(문자열을열거하는방식)은 불가능 합니다. 숫자형 값은 px로 가정하고 상대값으로 지정을 하고 싶을 때에는 값 앞에 접두사로 감소시에는"-=", 증가시에는 "+=" 을 붙여주면 됩니다.
주의점은 프로퍼티명에 margin-top 같이 하이픈(-)이 들어가는 경우가 생길 수 있습니다. 그러나 JavaScript에서는 프로퍼티명에 하이픈을 사용할 수 없기 때문에 프로퍼티명을 따옴표("") 안에 작성해줘야 합니다.
프로퍼티의 값에 대해 추가로 알아보자면 숫자형만이 아닌 jQuery 애니메이션에서 지원하는 show, hide, toggle을 사용하면 현재 애니메이션이 끝난 후에 show() , hide() 메서드를 호출합니다.
4.2 애니메이션 옵션 객체
애니메이션의 옵션 객체는 필수 요소는 아닙니다. 옵션 객체에는 애니메이션 실행 방법을 지정한 옵션이 들어 있으며 jQuery버전에 따라 계속 추가되고 있습니다. 주로 사용되는 옵션은 위에서 설명 했었던 duration, complete, easing 메서드들과 애니메이션을 실행시에 대기열에 담을 지를 정하는 queue등이 있습니다. “queue : false” 가 옵션으로 추가되면 대기열에 등록이 되지 않게 됩니다. 대기열에 등록되지 않은 애니메이션은 바로 시작이 되고 대기열에 있는 다른 애니메이션과는 서로 연관 관계가 없어 집니다.
