[Javascript] lottie 사용기

페이지 내에 간단한 애니메이션을 넣을 일이 생겨서 lottie를 쓰게 되었다

https://airbnb.io/lottie/#/web

Lottie Docs

라이브러리는 cdn url그대로 쓰거나 직접 url들어가서 파일 다운받아쓰거나..

나는 회사니까 다운받았다 'ㅅ'a

 

사용법은 매우 간단했다

1. 디자이너분께서 전달해주신 json파일을 resource 폴더에 넣고

2. lottie 스크립트를 import 한 후에

3. docs에 써있는 그대로 불러오면된다

//1. 
var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
});
//2. 
lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});
//3. in HTML
<div style="width:1067px;height:600px" class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>

 

 

3번의 경우 renderer가 canvas로 설정되어 변경되지 않았다 ㅠㅠ (data-anim-renderer가 아닌가..)

1, 2번은 DOMContentLoaded 시점에 추가하자 :) ( ex. $(document).ready )