2020. 2. 13. 12:56ㆍFront-end/Basic
Lottie json은 에펙(Affter Effects)으로 애니메이션 이미지를 만든 후, bodymovin 플러그인을 이용하여 Lottie json파일로 export하여 만든다.
이 json 파일을 이용하여 움직이는 이미지를 웹(또는 모바일) 화면에 출력할 수 있습니다.
간단한 사용방법을 알아보기 위해, 무료 lottie 파일을 다운받아 실습해 봅시다.
1. Lottie json 파일 다운
LottieFiles 사이트에 들어가면 bodymovin으로 만든 무료 Lottie json 파일을 다운받을 수 있습니다.
Lottie JSON 형태로 Download를 합니다.
2. lottie-player 라이브러리 import
lottie json 파일은 html, webflow, android, iOS 환경에서 이용할 수 있습니다.
그 중 웹 환경에서는 lottie-player 라이브러리를 import하면 바로 이용 가능합니다.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
위의 import 문을 lottie json의 사용을 위해 body태그 내의 맨 하단에 추가해줍니다.
2.1. thymeleaf 템플릿에서의 사용 예시
<body> ... <div style="position:absolute; top: calc(50vh - 112.5px); left: calc(50% - 150px);"> <lottie-player th:src="@{/static/img/lottie/paper-airplane.json}" background="transparent" style="width: 300px; height: 225px;" speed="1" loop autoplay> </lottie-player> </div> ... <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> </body>
홈페이지의 윗부분에 고정시키기 위해 position을 absolute로 설정한 div를 겉에 감쌉니다.
이 div 태그를 body태그 내에 추가합니다.
로티 이미지 너비(width), 높이(height)를 300px, 225px 고정값으로 설정했기 때문에
top에 50vh(뷰포트 높이 50%)에 로티 이미지 높이의 절반을 뺀 값을 설정하고
left에 50wh(뷰포트 너비 50%)에 로티 이미지 너비의 절반을 뺀 값을 설정합니다.
로티 이미지가 적용된 웹 페이지 화면
2.2. 일반 html에서의 사용 예시
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lottie test</title> </head> <body align="center"> <h1>Lottie json 이미지 파일 이용하기</h1> <div style="position:absolute; top: calc(50vh - 112.5px); left: calc(50vw - 150px);"> <lottie-player src="./lottie/paper-airplane.json" background="transparent" style="width: 300px; height: 225px;" speed="1" loop autoplay> </lottie-player> </div> <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> </body> </html>
WAS에 위의 html을 올리거나, 웹서버에 홈페이지 경로를 연결합니다.
3. VS Code Liver Server로 테스트
웹서버나 WAS에 html 파일을 올려서 테스트를 해볼 수 도 있으나, 여기서는 간단하게 Visual Studio Code의 Live Server를 이용하여 파일을 열어보도록 합니다.
만일, Live Server 플러그인이 없다면 먼저 Live Server 플러그인을 설치합니다.
VS Code의 우하단에 위치한 Go Live를 클릭합니다.
그러면 아래와 같이 lottie test 화면이 웹브라우저에 열리는 것을 확인해 볼 수 있습니다.
※ GitHub에서 playground 프로젝트(v1.0.1)를 다운받아 볼 수 있습니다.
- Lottie를 이용한 로딩화면 설정
- Use Lottie animation in Html
- Embed Lottie animations on website