Lottie

1. Lottie란

애니메이션

  화면에서 복잡하고 화려한 애니메이션을 표현해야할 때 css 와 JavaScript만으로는 너무 어려울 때가 있다. 이러한 때 gif파일을 사용해야겠다는 생각이 들 것이다. 이 때 gif 뿐만 아니라 Lottie라는 선택지도 존재한다.

 

  Lottie란 gif처럼 애니메이션을 표현하는 방법으로, .json파일 형식으로 되어있다. gif에 비해 Lottie의 장점은 다음과 같다.

• gif보다 훨씬 용량이 작다.
• 확대/축소해도 이미지가 깨지지 않는다.

 

2. Lottie 파일 얻기

Free Lottie Animation Files, Tools & Plugins - LottieFiles

  디자이너가 Lottie 파일을 제작하려면 AfterEffect와 플러그인을 사용해야한다. 주변에 디자이너가 있어서 Lottie파일을 만들어주면 좋지만, 취준생인 나는 Lottie파일을 어디서 구해야할까? iconfinder와 같은 사이트에서 미리 만들어진 icon 파일들을 제공하는 것처럼 LottieFiles라는 사이트에서 미리 만들어진 Lottie 파일들을 구할 수 있다.

 

 

3. React에서 사용해보기

npm instal react-lottie

  React에서 Lottie 파일을 쓰려면 먼저 react-lottie 라이브러리를 설치해야한다.

 

import Lottie from 'react-lottie';
import loading from '../../res/lotties/bid.json'; //Lottie 파일

const LoadingModal = ({isLoading}) => {

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: loadingBid,
    rendererSettings: {
      preserveAspectRatio: 'xMidYMid slice',
    },
  };

  return (
    <Dimmer visible={isLoading}>
      <LoadingContainer>
        <Lottie options={defaultOptions} height='90%' width='90%' />
      </LoadingContainer>
    </Dimmer>
  );
};

  Lottie파일을 쓰고싶은 곳에서 react-lottie 라이브러리와 Lottie 파일(bid.json)을 불러온 후 Lottie 옵션들을 작성한 후 컴포넌트처럼 사용하면 된다.

 

 

---

 

react-lottie