jQuery를 이용한 오브젝트의 애니메이션

오브젝트의 애니메이션

XELF에서는 프로젝트에 다양한 오브젝트를 넣어 문서를 작성할 수 있습니다. 하지만 작성한 문서가 가만히 멈춰있기만 한다면 재미없는 문서가 되겠죠. XELF에서는 오브젝트에 애니메이션을 넣거나 인터랙션을 넣어서 가만히 멈춰있는 문서가 아닌 움직이고 반응하는 문서를 만들 수 있습니다. 오브젝트에 애니메이션 효과를 설정하는 방법에는 여러 가지가 있습니다. 자바스크립트를 이용해 오브젝트의 위치, 크기 등을 지속적으로 변경해주는 방법, CSS의 transition, animation 속성 등을 이용하는 방법, 기타 애니메이션 자바스크립트 라이브러리를 이용하는 방법 등입니다. XELF에서는 필요에 따라 CSS를 이용한 방법과 jQuery를 이용한 방법을 혼용해서 사용하고 있습니다. 이번에는 jQuery를 이용한 애니메이션 설정 방법을 알아보도록 하겠습니다.

jQuery를 사용하는 방법

jQuery는 HTML DOM의 조작을 간편하게 해주고 다양한 편의 기능을 제공하는 자바스크립트 라이브러리입니다. 또한 다양한 브라우저에서 동일한 방법으로 동일한 동작을 하도록 도와줍니다. 그렇기 때문에 크로스 브라우징 이슈와 브라우저 버전 이슈 등을 간단하게 해결할 수 있습니다.
jQuery 라이브러리를 사용하기 위해서 먼저 jQuery 라이브러리를 페이지 내에 포함시켜야 합니다. 외부 라이브러리, 모듈 등을 페이지, 프로그램 내에 포함시키는 방법에는 여러 가지가 있습니다. 페이지 내에 직접 작성하는 방법, 페이지 내에서 링크를 하는 방법, requirejs 등의 모듈 로더를 이용하는 방법, webpack 등의 모듈 번들러를 이용하는 방법 등이 있습니다. 이번에는 간단하게 페이지 내에 링크를 하는 방법을 이용하겠습니다.
먼저 jQuery 사이트에 접속하여 jQuery 라이브러리 파일의 URL을 찾습니다. html 내에 script 태그를 입력하고 알아낸 주소를 script 태그의 src 속성에 입력합니다. script 태그의 위치는 일반적으로 head 내에 또는 body 태그가 끝나기 바로 전에 입력합니다. 두 방법은 작동 방식이 차이가 있고 용도에 맞춰서 선택하여 사용하면 됩니다.

이후 브라우저의 콘솔 창에 jQuery의 버전을 확인하는 코드를 입력하는 방법 등으로 정상적으로 jQuery가 반영됐는지 확인합니다.

jQuery로 애니메이션 효과를 설정하는 방법

jQuery에는 DOM을 조작하는 다양한 함수들이 있습니다. 상황에 맞는 함수를 선택하여 웹 페이지에 움직임을 표현합니다. 그중 animate 함수에 대해 알아보도록 하겠습니다.

animate 함수는 두 가지 파라미터 형태를 가지며 jQuery 객체를 반환합니다. 1번 함수는 자주 쓰이는 옵션들만 파라미터로 받아 간략화된 형태입니다. 1, 2번 함수 중 상황에 맞게 선택하여 사용하면 되고 이번에는 1번 간략화 된 함수에 대해서 알아보겠습니다.
animate 함수의 각 파라미터에 대한 설명은 아래 표와 같습니다.

위에서 알아본 내용을 바탕으로 오브젝트의 left 값을 1초간 200px로 이동시키는 코드를 작성해보겠습니다.

오른쪽으로 이동하는 오브젝트

오브젝트가 1초간 200px 위치로 이동하는 것을 확인할 수 있습니다.
그렇다면 위치와 크기를 동시에 변경할 때는 어떻게 할까요? properties 파라미터에 위치, 크기 값을 추가하면 됩니다. 이번에는 오른쪽 아래로 100px 씩, 크기를 100px 씩 키워보겠습니다.


이동하며 커지는 오브젝트

오브젝트가 오른쪽 아래로 움직이며 커지는 것을 확인할 수 있습니다. 위에서 작성한 코드와 방금 작성한 코드에는 차이점이 있습니다. 위치, 크기 값 앞에 ‘+=’라는 텍스트가 추가된 건데요. ‘+=’, ‘-=’라는 텍스트를 추가하면 해당 애니메이션이 동작할 때 현재 값에서 입력한 값을 더하거나 빼라는 의미입니다.
위치와 크기를 동시에 변경할 때는 properties 파라미터에 추가해서 동시에 변경이 되었습니다. 그렇다면 위치와 크기를 순차적으로 변경할 때는 어떻게 해야 할까요? animate 함수를 순차적으로 호출하여 위치, 크기 변경을 순차적으로 진행할 수 있습니다.

순차적으로 움직이는 오브젝트

순차적으로 이동하고 커지고 다시 원래 위치, 크기로 돌아가는 것을 확인할 수 있습니다. animate 함수는 jQuery 객체를 리턴하기 때문에 animate 함수 뒤에 이어서 animate 함수를 다시 호출할 수 있습니다.

지금까지 jQuery를 이용하여 오브젝트의 애니메이션을 설정하는 방법에 대해 알아보았습니다. 이번에 소개하지 않은 animate 함수의 다양한 옵션과 플러그인 등을 통해 더욱 다채로운 애니메이션을 구현할 수 있습니다. 다양한 기능들을 활용하여 멋진 애니메이션을 만들어 보길 바랍니다.