웹사이트에 Lottie 애니메이션 추가

롯데 애니메이션이란?

Lottie는 웹 및 모바일 애플리케이션에 애니메이션을 추가하기 위한 JSON 파일 형식입니다. 로티 애니메이션은 시선을 사로잡고 이미지와 텍스트보다 더 효과적으로 메시지를 전달할 수 있습니다. 전반적인 사용자 경험을 훨씬 더 즐겁게 만듭니다. Lottie 애니메이션은 웹, iOS, Android, Windows 및 React Native에서 작동하므로 청중이 사용하는 장치나 브라우저에 관계없이 애니메이션을 볼 수 있습니다.
예:

로티 파일

LottieFiles은 디자이너가 만든 수많은 무료 애니메이션을 찾을 수 있는 놀라운 웹사이트입니다. 그리고 우리는 그들의 애니메이션을 우리 프로젝트에 사용할 것입니다. 모든 놀라운 애니메이션을 찾을 수 있는 this page으로 이동하십시오. 애니메이션을 선택하십시오. 우리의 목적을 위해 다음을 사용할 것입니다.



아래에서 "Lottie 애니메이션 URL"을 찾을 수 있습니다. 이것은 이 애니메이션의 JSON 파일 URL입니다. 복사하십시오. 하지만 어떻게 사용할 수 있습니까?

롯데 애니메이션 사용

LottiFiles에는 npm이라는 이름의 @lottiefiles/lottie-player 패키지가 있습니다. CDN에서 가져오거나 설치할 수 있습니다.

CDN

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/tgs-player.js"></script>

고궁

npm i @lottiefiles/lottie-player

import "@lottiefiles/lottie-player";

용법

lottie-player 요소를 추가하고 src 속성을 이전에 복사한 JSON 파일을 가리키는 URL로 설정합니다.

<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" ></lottie-player>

애니메이션의 동작을 제어하는 ​​데 사용할 수 있는 몇 가지 다른 속성도 허용합니다.

<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" autoplay loop controls background="transparent" speed="1" ></lottie-player>

이러한 속성을 가지고 놀 수 있습니다here.
그게 다야!

This article was originally published on my hashnode blog.