30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. JavaScript
Code

Anime.js를 사용하고 자바스크립트에 기반한 애니메이션, 1부: 타겟과 속성

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called JavaScript-Based Animations Using Anime.js.
JavaScript-Based Animations Using Anime.js, Part 2: Parameters

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

Anime.js는 자바스크립트를 기반으로 하는 경량의 애니메이션 라이브러리입니다. 여러분은 웹페이지에서 여러 가지 CSS 속성과 SVG 혹은 DOM 속성을 움직이는 데 이 라이브러리를 이용할 수 있습니다. 라이브러리에서는 애니메이션에 관한 모든 것이 제어 가능하고, 타깃으로 하고 싶은 엘리먼트나 움직이게 하고 싶은 속성들을 명시하는 다수의 방법을 제공합니다.

여러분은 애니메이션들을 작동하는 순서나 서로 다른 엘리먼트들의 애니메이션을 어떤 식으로 조화롭게 서로 동시에 움직이게 할지 제어하게 됩니다. 이 라이브러리는 IE10+을 포함한 모든 모던 브라우저를 지원하고 있습니다.

여러분은 이 튜토리얼의 시리즈에서 Anime.js의 피처(features)에 대해 모든 것을 학습함으로써 실전 프로젝트에서 쉽게 적용할 수 있을 것입니다.

본격적으로 학습에 들어가기 전에 먼저 라이브러리를 설치해 보죠. 아래의 명령어를 실행해 라이브러리를 설치하기 위해서는 npm이나 bower를 이용하면 됩니다.

라이브러리를 다운로드하고 프로젝트 안에 넣거나 CDN에서 제공하는 최신 버전의 라이브러리로 직접 링크를 걸 수도 있습니다.

성공적으로 설치를 했다면, 이제 엘리먼트에 재밌는 애니메이션을 추가할 라이브러리를 사용할 수 있습니다. 라이브러리의 기초부터 시작하여 한 번에 한 가지 특정 영역에 중점을 두고 진행하겠습니다.

타깃 엘리먼트 명시하기

Anime.js를 이용해 애니메이션을 제작하려면, anime() 함수를 호출하고 그 중에서도 애니메이션 하려는 타깃 엘리먼트와 프로퍼티를 명시할 key-value 쌍으로 함수를 오브젝트에 넘겨주어야 합니다. targets key를 이용해 Anime.js에 애니메이션 하려는 엘리먼트가 무엇인지 말할 수 있습니다. 이 key는 다른 형식으로 값을 받기도 합니다.

CSS 선택자: targets 키 값으로 한 개 이상의 CSS 선택자를 전달할 수 있습니다.

첫 번째의 경우, Anime.js에서는 blue class가 있는 엘리먼트를 모두 애니메이션 합니다. 두 번째의 경우에는 red 혹은 blue class가 있는 엘리먼트를 전부 애니메이션 할 것입니다. 세 번째의 경우에 Anime.js는 square class가 있는 짝수 번째의 자식 노드를 애니메이션 하고요. 마지막의 경우에는 red class가 없으면서 square class가 있는 엘리먼트를 전부 애니메이션 할 것입니다.

DOM 노드 혹은 NodeList: target key의 값으로 DOM 노드나 Nodelist를 사용해도 됩니다. 다음은 DOM 노드로 targets를 설정한 예들 입니다.

첫 번째의 경우, 특정 엘리먼트에 적용하려고 getElementById() 함수를 사용했습니다. querySelector() 함수는 blue class가 있는 첫 번째 엘리먼트를 얻는 데 사용했고요. querySelectorAll() 함수는 명시된 선택자 그룹과 일치하는 도큐먼트 안에 있는 엘리먼트는 전부 가져오는 데 사용했습니다.

여러분이 애니메이션 하고자 하는 타깃 엘리먼트를 선택하는 데 사용 가능한 다른 함수들은 많습니다. 예를 들면, getElementsByClassName() 함수를 이용해 특정 class 이름이 있는 엘리먼트를 모두 얻을 수도 있습니다. getElementByTagName() 함수를 이용하여 특정 태그명이 있는 엘리먼트를 전부 얻을 수가 있는 유사한 방식도 있습니다.

DOM 노드나 NodeList를 받는 함수는 Anime.js에서 targets key 값을 설정하는 데 사용할 수 있습니다.

Object: targets 키값으로 자바스크립트 오브젝트도 이용할 수 있습니다. 해당 오브젝트의 키는 식별자로 사용되며 키값은 애니메이션에 필요한 수로 사용됩니다.

그런 후에 자바스크립트를 추가해서 다른 HTML 엘리먼트 안에서 애니메이션을 보여줄 수 있습니다. 다음은 오브젝트의 두 개의 다른 키값으로 애니메이션을 작동하게 하는 코드입니다.

위의 코드에서 스캔된 파일 수를 0부터 1,000까지, 전염된 파일 수를 0부터 8까지 애니메이션 합니다. 이런 식으로 숫자 값으로만  할 수 있다는 것을 알고 계세요. 키를 ‘AAA’부터 ‘BOY’까지 애니메이션 시키려고 한다면 그 결과로 에러가 날 것입니다.

또한, 애니메이션이 진행되는 동안 모든 프레임에서 호출되는 update 키에 관한 콜백 함수를 사용했습니다. 여기에서는 스캔과 전염된 파일의 수를 업데이트하는 데 사용한 것이지요. 하지만 좀 더 활용해서 전염된 파일 수가 특정 한계를 넘어설 때 에러 메시지를 사용자에게 보여줄 수 있습니다.

Array: 다양한 카테고리에 속한 여러 엘리먼트들을 애니메이션 해야 할 때 자바스크립트 배열을 target으로 명시하는 것은 도움이 됩니다. 가령, 여러분이 CSS 선택자에 기반하여 어떤 DOM 노드와 오브젝트, 다른 엘리먼트들을 애니메이션 하고 싶다면 그 모두를 배열에 넣고 그 배열을 targets 키값으로 정하면 너무도 쉽게 애니메이션 할 수 있습니다. 좀 더 명확한 예제가 아래에 있습니다.

Anime.js에서 애니메이션 할 수 있는 속성들

여러분이 애니메이션 하려는 여러가지 엘리먼트를 명시하는 방법을 알았으니 이제는 라이브러리를 이용해 애니메이션 시킬 수 있는 프로퍼티(properties)와 어트리뷰트(attributes)에 대해 알아보겠습니다.

CSS 프로퍼티: Anime.js에서는 다양한 타깃 엘리먼트에 대해 width와 height, color 같은 CSS 프로퍼티를 다수 이용해 애니메이션 할 수 있습니다. background-color와 border-width와 같은 애니메이션 가능한 다양한 프로퍼티 최종 값은 해당 프로퍼티의 캐멀 케이스(camel case) 형식으로 작성합니다. 그러니까 background-color는 backgroundColor로, border-width는 borderWidth가 되는 것이지요. 아래 코드에서 Anime.js에서 타깃 엘리먼트의 left position과 background color를 애니메이션 하는 방법을 보여주고 있습니다.

프로퍼티에서는 CSS에서 일반적으로 사용될 때 수용되는 값의 형식을 모두 받습니다. 예를 들어, left 프로퍼티의 값으로 50vh500px, 25em을 설정해도 됩니다. 순전히 숫자를 값으로 적을 수도 있습니다. 그런 경우에 해당 숫자는 픽셀로 전환됩니다. 그와 유사하게 배경색은 16진수(hexadecimal)과 RGB, 혹은 HSL 컬러값으로 지정 가능합니다.

CSS Transforms: Anime.js를 이용해 다양한 CSS transform을 애니메이션 할 수 있습니다. translateXtranslateY 프로퍼티를 이용해 x와 y 축으로 변형 가능합니다. 마찬가지로 지정된 축에 상응하는 scaleskew, rotate 프로퍼티를 이용해 엘리먼트를 지정한 축을 따라 크기 조절을 하거나 기울이거나 회전시킬 수 있습니다.

용어나 각도, 혹은 회전(turn)으로 여러 각도를 지정할 수 있습니다. 1회전 값은 360°과 같습니다. 완전한 회전이라는 측면에서 엘리먼트들을 얼마나 돌려야 할지 알고 있을 때에 계산이 좀 더 쉽게 됩니다. 다음의 예제에서는 엘리먼트를 개별적이거나 한번에 크기(scaling), 변형(translation), 혹은 회전(rotation)하는 애니메이션을 어떻게 구현하는지 보여줍니다.

SVG 애트리뷰트: Anime.js로 여러 SVG 요소의 애트리뷰트를 애니메이션 할 수 있습니다. 단 하나의 조건이라면 그 애트리뷰트의 값이 숫자여야 한다는 것이지요. 서로 다른 애트리뷰트를 애니메이션 하는 능력은 정말로 멋진 효과를 제작하는 가능성을 열어줍니다. 여러분이 이제 막 Anime.js를 배우기 시작하기 때문에 이 튜토리얼에서는 기본 예제를 유지하겠습니다.

학습을 진행하면서 좀 더 복잡한 애니메이션을 만드는 방법을 배우겠습니다. 원(circle)의 cxcy, stroke-width 애트리뷰트를 애니메이션 하는 코드가 아래 있습니다. CSS 프로퍼티와 같이 코드를 동작시키기 위해 stroke-width를 캐멀 케이스 형식으로 작성해야 합니다.

DOM 애트리뷰트: 여러분이 SVG 애트리뷰트를 애니메이션 했던 것처럼 숫자로 표현되는 DOM 애트리뷰트를 애니메이션 할 수 있습니다. HTML5 progress 엘리먼트가 DOM 애트리뷰트를 애니메이션 하기에 유용한 경우입니다. 이 엘리먼트에는 valuemax, 2개의 애트리뷰트가 있습니다. 우리 예제에서 파일 전송 프로세스를 보여주기 위해 value 애트리뷰트를 애니메이션 해보겠습니다. 다음은 value 애트리뷰트를 애니메이션 시키는 코드입니다.

마무리 하며

여러분은 이 튜토리얼을 통해 Anime.js에서 타깃 엘리먼트를 선택하는 모든 방법과 해당 엘리먼트들과 관련 있는 여러가지 CSS 프로퍼티와 애트리뷰트들을 어떤 식으로 애니메이션 하는지 배웠습니다.

자바스크립트가 바로 그 웹의 언어라는 것은 틀림없습니다. 물론, 어느 정도는 공부를 해야 합니다.  아시다시피 알아야 할 프레임워크와 라이브러리가 쌓여 있습니다.  작업하는 데 학습하거나 활용할 추가적인 리소스를 찾고 계시다면 Envato marketplace에서 이용 가능한 게 있는지 확인해 보세요.

이 시리즈의 다음 튜토리얼에서는 그룹이나 개별적으로 다양한 프로퍼티에 관한 애니메이션의 이징(easing)과 지연(delay), duration(시간)을 활용하는 방법을 알려드립니다. 그때 개별 엘리먼트의 애니메이션 매개 변수를 작성하는 방법을 알게 될 것입니다.

이 튜토리얼과 관련한 질문이 있거나 흥미로운 프로젝트에서 Anime.js를 사용했었다면 댓글을 통해 알려주세요.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.