[sample coding] js - lottie 애니메이션

After Effects 애니메이션을 렌더링 하는 라이브러리로
Bodymovin 이라는 오픈소스를 통해 json 형식으로 추출한 애니메이션 데이터를 사용하여 애니메이션을 렌더링한다

장점

• gif 애니메이션보다 훨씬 작은 용량으로 제작되어 리소스를 대폭 줄일 수 있다.
• json 데이터 파일로 제작하면 해상도에 제한이 없다는 장점이 있다.
• 디자이너에게 수치를 받아서 애니메이션을 직접 구현할 필요없이 디자이너에게 json 파일을 받아 바로 개발에 적용시키기만 하면 되는 편리함이 생긴다.
  
  👀 참고블로그

라이브러리 github

먼저 라이브러리를 설치해준다.

설치 안내

• 플러그인 설치

• npm 패키지

# with npm
$ npm install lottie-web

👀 예제코드

let lottieAnimation = null;

// 로띠 mount & 실행
$_setLottieAnimation(options) {
  lottieAnimation = bodymovin.loadAnimation(options);
},
// 로띠 옵션 설정 
$_getOptionObj(target, filePath) {
    return {
      container: document.getElementById(target),
      renderer: 'svg', //랜더링되는 파일
      loop: false, // 반복여부
      autoplay: true, // 자동재생 여부
      path: `${filePath}.json`, //json파일경로
    };
  },
$_createLottie() {
    const options = $_getOptionObj('targetId1', 'lottie/filePath1');
    $_setLottieAnimation(options);
 },

/* 로띠 생성 */
$_createLottie();

/* 로띠 삭제 */
// lottieAnimation.destroy();