CSS애니메이션 라이브러리 [anime.js]

anime.js는 canvas를 활용한 애니메이션을 지원하는 대표적인 자바스크립트 애니메이션 라이브러리다. 최근(3월) 3.2버전으로 업데이트 되면서 자바스크립트 객체와 관련된 부분, 3D표현력이 좋아졌다.  

 

https://animejs.com/

anime.js

개인적으로 anime.js를 사용해본 결과, 로그인 폼과 같은 간단한 부분에 대한 만족도가 컸다. 반면, anime.js의 메인페이지에서 화려하게 움직이고 있는 시각적인 디자인은 뭐랄까. 재능낭비같은 느낌이 든다. 물론 시각적인 효과로써 고객에게 압도적인 퍼포먼스를 선보여야하는 외주제작자 혹은 IT예술가 분들에게 있어 anime.js의 기능은 가뭄속의 단비와 같다. 

 

하지만 기능을 다소 중시하는 프로그래머들에게 있어 anime.js는 늘어나는 프레임워크 중에서 또 뭔가 학습곡선을 타야하는 귀찮은 요소가 된다. 가령 아래 예제는 anime.js로 구현한 로그인 폼이다.

Login

By logging in you agree to the ridiculously long terms that you didn't bother to read

Email Password

 

 

아마도 위의 '라인 애니메이팅'이란 시각적 효과를 보면서 놀라워하는 사용자는 많지 않을 것 같다. 부트스트랩과 같은 CSS프레임워크가 등장한 이후, 사용자들의 눈높이는 상향평준화에 맞춰져 있기 때문에 오히려 개발자들이 더욱 선호할 가능성이 높다. 다음과 같은 효과를 위해 굳이 라이브러리를 사용할 필요는 없어보인다.

https://animejs.com/documentation/#morphing

anime.js

다만, 예술적인 효과에서는 anime.js보다 나은 시각적인 라이브러리는 드물다. 특히, three.js와 같은 3D라이브러리와 함께 사용할 때는 환상적인 퍼포먼스를 보여준다.