React에 벡터 기반 애니메이션 Lottie 추가하기
date
Jun 16, 2022
slug
lottie-for-react
status
Published
tags
React
frontend
summary
Lottie는 벡터 기반이기 때문에 아무리 확대해도 깨지지 않는다.
type
Post
Lottie가 뭔가요?
- Lottie는 Airbnb에서 개발한 오픈소스 라이브러리이다.
- JSON 기반 애니메이션 파일을 실시간으로 랜더링한다.
- JSON을 사용할때 벡터 기반이기 때문에 아무리 확대해도 깨지지 않는다.
React.js에서 사용법
1. 라이브러리 추가하기
2. 멋있는 LottieFile 고르기
2.1. LottieFiles 웹사이트 https://lottiefiles.com 에서 괜찮은 애니메이션을 찾는다.
2.2. JSON 파일 다운로드하기
3. JSON 파일을 프로젝트 폴더에 저장
4. 코드 작성
isClickToPauseDisabled는 클릭시 애니메이션이 멈추는 기능을 끈다.결과 화면
