[REACT] 리액트 lottie-web 으로 애니메이션 넣기

https://lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles

귀여운 애니메이션 요소들을 넣어 우리의 웹사이트를 더욱 풍요롭게 만들어보자!

 

 

 

1. lottie-web라이브러리 설치

https://github.com/airbnb/lottie-web

GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io

 

 

2. 마음에 드는 파일 다운로드

 

json파일을 다운받고 우리의 프로젝트에 파일을 만들어서 넣어주자

 

import React , {useEffect, useRef} from "react";
import styled from "styled-components";
import lottie from "lottie-web";
import Color from "../../shared/Color";
import { style } from "@material-ui/system";

const GetTreasureLottie = ()=>{
     //lottie
  const likecontainer = useRef();
  useEffect(()=>{
    lottie.loadAnimation({
      container: likecontainer.current,
      renderer: 'svg',
      loop: false,
      autoplay:true,
      animationData:require("./congratulation.json")
     
    })

  },[])
    return(
        <Wrapper>
            <NoMore ref={likecontainer}></NoMore>
          
        </Wrapper>
    )
}

const Wrapper = styled.div`

`;
const NoMore = styled.div`
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
margin: 0 auto;
z-index: 1000;
`;
const Arrow = styled.div`
position: absolute;
bottom: 100px;
left: 40%;
width: 80px;
height: 80px;
margin: 0 auto;
`;

const Text= styled.div`

`;


export default GetTreasureLottie;

 

로티 컴포넌트를 만들어서 ref로 지정해주고 이렇게 사용한다.

 

그리고 이 컴포넌트는 필요한 페이지에서 갖다쓰면된다.

참 쉽죠잉?