Project/Portfolio

#3 로티 애니메이션

믹석이 2023. 3. 31. 15:40
728x90
 

LottieFiles: Download Free lightweight animations for website & apps.

Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!

lottiefiles.com

움직이는 애니메이션을 사용하고 싶으면 위 사이트에 접속하면 된다.

그리고 마음에 드는 애니메이션을 찾았다 싶으면

다운로드를 누른 후 Lottie JSON 파일을 다운로드하여준다.

그리고 public 폴더 안에 넣어준다. 이러면 일단 애니메이션 세팅 끝

로티 애니메이션 라이브러리

yarn add react-lottie-player

 

GitHub - mifi/react-lottie-player: Fully declarative React Lottie player

Fully declarative React Lottie player. Contribute to mifi/react-lottie-player development by creating an account on GitHub.

github.com

components/home/animation.tsx

import React from "react";
import Lottie from "react-lottie-player";
import lottieJson from "/public/animation.json";

export default function Animation() {
  return <Lottie loop animationData={lottieJson} play />;
}

위 react-lottie-player git에 사용법 그대로 가져와 lottieJson 폴더 경로만 바꿔주고 사용했다.

 

움직이는 애니메이션을 사용하고 싶으면 위 사이트에 접속하면 된다.

그리고 마음에 드는 애니메이션을 찾았다 싶으면

다운로드를 누른 후 Lottie JSON 파일을 다운로드하여준다.

그리고 public 폴더 안에 넣어준다. 이러면 일단 애니메이션 세팅 끝

로티 애니메이션 라이브러리

yarn add react-lottie-player

 

GitHub - mifi/react-lottie-player: Fully declarative React Lottie player

Fully declarative React Lottie player. Contribute to mifi/react-lottie-player development by creating an account on GitHub.

github.com

components/home/animation.tsx

import React from "react";
import Lottie from "react-lottie-player";
import lottieJson from "/public/animation.json";

export default function Animation() {
  return <Lottie loop animationData={lottieJson} play />;
}

위 react-lottie-player git에 사용법 그대로 가져와 lottieJson 폴더 경로만 바꿔주고 사용했다.

LIST