카테고리 없음
[Javascript] lottie 사용기
유부뽀
2019. 12. 20. 11:39
페이지 내에 간단한 애니메이션을 넣을 일이 생겨서 lottie를 쓰게 되었다
https://airbnb.io/lottie/#/web
Lottie Docs
airbnb.io
라이브러리는 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 )
반응형