mo.js는 많은 사람들에게 사랑받고 있는 애니메이션 라이브러리 중 하나이다. 이전에 anime.js를 사용해보면서 다른 라이브러리들도 궁금해져서 이번에 mo.js를 사용해보기로 했다.
메인페이지에서 부터 화려한 애니메이션을 뽑낸다.. 저걸 어떻게 만든거지… 아래는 usecase 가장 마지막에 나오는 예시 중 하나이다! 과연 공부를 다 하고나면 이렇게 만들 수 있을지.. 한번 배워보도록 하자!
https://codepen.io/sol0mka/pen/pbRejJ
npm, yarn을 통해 받거나 cdn version을 활용할 수 있다.
npm, yarn
npm i @mojs/core
yarn add @mojs/core
import mojs from '@mojs/core'
cdn
<script src="<https://cdn.jsdelivr.net/npm/@mojs/core>"></script>
우선 mo.js가 어떤 API들을 제공하는지부터 살펴보자! 상당히 많은 API들을 제공하고 있는데, 들어가기 전 살펴봐야할 API는 Modules 부분이다.
각 모듈을 간단히 설명하면 아래와 같다.
Html
- 만들어진 html element를 선택해서 적용Shape
- 특정 모양을 지정한 parent element에 추가ShapeSwirl
- shape기반, x/y 움직임을 사인함수 형태로 계산해줌Burst
- 아래에서 따로 설명추가로 Tweens와 Easing은 필요에 따라 하나씩 찾아보면서 적용하면 큰 문제없이 진행할 수 있다.