[JS] Lottie Animation 사용 방법

Lottie Animation을 Json 형태로 가져와 벡터 이미지를 Web에 뿌려줄 수 있습니다. 오늘은 Lottie Animation 사용하는 방법에 대해 알아 보도록 하겠습니다.

Lottie Animation

LottieA Animation은 에어비앤비에서 개발한 라이브러리입니다.

 

After Effects로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 html, webflow, android, iOS 환경에서 이용할 수 있습니다.

 

Lottie Animation은 벡터 기반의 애니메이션인데 즉, SVG로 저장됩니다. 

TIP

 

 

벡터 이미지란?
벡터 이미지는 png, jpg등과 다르게 용량이 적고 해상도 저하가 일어나지 않는다는 장점이 있습니다.

Lottie 사용 방법

lottie JS는 lottie file 에서 더 많은 기능을 확인할 수 있습니다. 오픈소스 라이브러리는 이곳을 참조하세요.

import

body 태그 안에 lottie-player.js를 import 해줍니다.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

html

그리고 html의 body 태그에 아래와 같이 json형태로 불러와 lottie animation을 그려줄 수 있습니다.

<div class="lottie-container">
    <lottie-player src="./bell.json" background="transparent" speed="1" loop autoplay></lottie-player>
</div>

CSS

.lottie-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

lottie-player {
    width: 300px;
    height: 300px;
}

GitHub - Seogun95/LottieJS

---

오늘은 이렇게 Lottie Animation 사용하는 방법에 대해 알아 보았습니다.

 

읽어주셔서 감사합니다🤟