1. bodymovin만 설치하여 사용
*react 에서 bodymovin 이용하여 애니메이션 구현시 lottie-web을 대신 사용 처리 (bodymovin 을 설치할 수도 있으나 react용은 버전이 낮아 lottie-web 사용)
-------------- bodymovin 만 설치시에는 아래와 같이 설치 / 사용 -----------------
bodymovin 설치 (https://www.npmjs.com/package/bodymovin)
npm install bodymovin
- 설치 후
import {bodymovin} from 'bodymovin';
-------------------------------------------------------------------------------------------
2. Lottie 설치 (https://www.npmjs.com/package/lottie-web)
설치 : npm install lottie-web
코드
import bodymovin, { AnimationItem } from 'lottie-web';
import ptrLoading from './res/lottie/ptr.json'; // json파일 데이터 사용시 가져와 사용
- 이후 다음과 같이 사용
let svgContainer = document.querySelector('#ptr-ani') as HTMLInputElement; //as HTMLInputElement 부분은 typescript 용 코드
let animItem = bodymovin.loadAnimation({
container: svgContainer,
renderer: 'svg',
loop: true,
autoplay:false,
//path: "./res/lottie/ptr.json",
animationData: ptrLoading
});
위에서
import ptrLoading from './res/lottie/ptr.json'; 를 하지 않고 직접 아래와 같이 require를 써서 사용해도 된다.
let svgContainer = document.querySelector('#ptr-ani') as HTMLInputElement; //as HTMLInputElement 부분은 typescript 용 코드
let animItem = bodymovin.loadAnimation({
container: svgContainer,
renderer: 'svg',
loop: true,
autoplay:false,
//path: "./res/lottie/ptr.json",
animationData: require('./res/lottie/ptr.json')
});