1.Lottie (로티) 란?
- 에어비앤비에서 개발한 라이브러리 입니다. After Effects(에프터 이펙트)으로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 웹, 앱(Android, iOS React-native)에 적용할수 있습니다.
- 벡터기반의 애니메이션 입니다.(로티는 svg)
2.Lottie 장점
- 벡터기반이라 용량이 적고 해상도 저하가 없습니다.(리소스 절감)
- 사용자의 인터렉션에 따라 제어가 가능합니다.(ex: play,stop)
3.Lottie 단점
- After Effects(에프터 이펙트)외 에 쓸만한 작업툴이 없습니다.
- 제작 과정이 복잡하여 숙련도가 필요합니다.
4.참고 사이트
- 공식홈페이지(Lottie) - https://airbnb.design/lottie/
- 공식메뉴얼 -http://airbnb.io/lottie/#/README
Lottie
Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
airbnb.design
- 로티파일(사용자모임) - https://lottiefiles.com/
Free Lottie Animation Files, Tools & Plugins - LottieFiles
The world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugins for Android, iOS, and Web.
lottiefiles.com
- Bodymovin(cdn) - https://cdnjs.com/libraries/bodymovin
bodymovin - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion r
cdnjs.com
5. 로티를 사용한 간단한 예제 입니다.
- 로티는 프레임 지정하여 원하는 시점에서 STOP과 PLAY 를 할수 있습니다.
- 로티파일 사이트에서 무료 애니메이션을 참고 하였습니다.
[React] React 에서 lottie 사용하기 (함수형)
1. 라이브러리 설치하기 npm을 이용하여 react-lottie 라이브러리를 설치합니다. npm을 이용하여 @lottiefiles/react-lottie-player 라이브러리를 설치합니다. npm install --save react-lottie //예제1 npm install --save @lott
ttowa.tistory.com
이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.
'Front End > Javascript' 카테고리의 다른 글
| [JS] Scope(스코프) 란 ? (0) | 2021.12.22 |
|---|---|
| [JS] GSAP으로 Mouse cursor change(마우스 커서 변경하기) (0) | 2021.11.24 |
| [JS] 웹(web), 모바일(mobile) 분기 스크립트 (0) | 2021.10.13 |
| [JS] 웹(Mobile)에서 SMS 문자보내기 (0) | 2021.10.08 |
| [JS] Javascript로 Image Sequence Mostion 만들기 (1) | 2021.06.22 |