React에서 lottie 사용해보기

Lottie

json 기반의 애니메이션 라이브러리이다. 웹이나 모바일 환경에서 png나 gif같은 비트맵 기반이 아닌, 벡터 기반으로 움직이는 애니메이션을 만들 수 있다. lottie는 용량이 작고, 확대 해도 화질이 저하되지 않는다는 장점이 있다.

💡 구현 예시

import React from "react";
import Lottie from "react-lottie";
import Loading from "assets/lottie/loading.json";

export default funtion Example() {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: LoadingSearch,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }
  };
  
  return (
    <Lottie options={defaultOptions} width={"4.5rem"} height={"4.5rem"} />
  );
}

lottie의 다양한 props는 [공식문서]를 참조.