「mo.js」모션그래픽 제작 라이브러리

 

 

 

 

 

 

[mo.js 실행]

 

mo.js 라이브러리는 Canvas를 활용한 모션그래픽 제작에 유용하다. 

 

https://mojs.github.io/

 

 

 

│코드

mojs라이브러리는 '로고제작용' 그 이상의 기능을 제공한다. 

 

「타임라인 에디터」

「베지어 곡선」

「Ease In & Out」

「Tween」

 

위와 같은 기능은 모션그래픽 제작 s/w의 필수요건이다.

 

단순히 움직이는 svg로고 그래픽 정도만을 제작한다면,

Shape & ShapeSwirl API에서 충분히 원하는 모션을 생성할 수 있다.

 

const spinner = new mojs.Shape({
  parent:           '#spinner',
  shape:            'circle',
  stroke:           '#FC46AD',
  strokeDasharray:  '125, 125',
  strokeDashoffset: {'0': '-125'},
  strokeWidth:      4,
  fill:             'none',
  left:             '50%',
  top:              '50%',
  rotate:            {'-90': '270'},
  radius:           20,
  isShowStart:      true,
  duration:         2000,
  easing:           'back.in',
})
.then({
  rotate:            {'-90': '270'},
  strokeDashoffset: {'-125': '-250'},
  duration:         3000,
  easing:           'cubic.out',
});

spinner.play();

 

Promise구문을 사용하기에 깔끔한 코드를 구사할 수 있고,

프레임워크 수준의 과도한 의존을 요구하지 않는다.

 

 

 

 

│한계점

모션그래픽에서 텍스트 모션은 상당히 중요하다.

배경이미지와 텍스트 애니메이션 조합만으로도 간단한 모션그래픽 제작이 가능하다.

 

텍스트 모션의 부재

 

하지만 mojs에서 텍스트 기능을 찾아볼 수 없다.

또한 'Shape 핸들바'기능이 없기 때문에 Timeline GUI를 적용하더라도

프래지와 같은 웹용 모션그래픽 제작툴을 제작하기 어렵다.(mojs만 사용할 때)

 

 

 

 

│결론

mojs라이브러리만으로 완벽한 모션그래픽용 툴을 제작하기는 어렵다.

텍스트, 핸들바, 이미지 기능이 없거나 부족하기 때문이다.

 

하지만 mojs는 2019년에 등장했고,

2주 간격으로 업데이트가 이뤄지고 있다.

 

현 상태로 업데이트가 꾸준히 진행된다면,

1년 내로 텍스트, 이미지 관련 기능은 보완될 것으로 예상된다//