리액트 lottie

리액트(React) Lottie 애니메이션 적용

Lottie는 After Effects 애니메이션을 실시간으로 렌더링하는 iOS, Android 및 React Native 라이브러리입니다.

 

평소, gif, css 애니메이션을 사용한 결과물보다 더욱더 만족스러운 퀄리티를 만들어 낼 수 있다는 장점을 가지고 있습니다.

또 다른 장점으로는 디자이너가 원하는 완성된 결과물을 바로 적용하기 때문에, 개발자가 애니메이션에 구현에 대한 시간과 노력을 절약할 수 있습니다.

 

애니메이션에 대한 모든 정보가 JSON 파일로 저장되기 때문에 특별한 프로그램 설치가 필요없습니다.

 

 

사용 방법

json 파일을 따로 저장해준 후, 다른 파일에서

import LoaderJson from "./파일명.json"; 을 해줍니다.

 

import React from "react";
import Lottie from "react-lottie";
import LoaderJson from "./danbiLoader_blue.json";   // 예시

const lottieOptions = {
  animationData: LoaderJson,
  loop: true,
  autoplay: true,
};

export function LoaderBlueLottie() {
  return (
    <>
      <Lottie options={lottieOptions} isClickToPauseDisabled={true} />
    </>
  );
}

 

이제 이 <LoaderBlueLottie /> 를 사용할 곳에 넣어주면 됩니다.