[Front-end] Web환경에서 Lottie json을 이용하여 움직이는 이미지 이용하기

2020. 2. 13. 12:56Front-end/Basic

300x250
반응형

Lottie json은 에펙(Affter Effects)으로 애니메이션 이미지를 만든 후, bodymovin 플러그인을 이용하여 Lottie json파일로 export하여 만든다.

이 json 파일을 이용하여 움직이는 이미지를 웹(또는 모바일) 화면에 출력할 수 있습니다.
간단한 사용방법을 알아보기 위해, 무료 lottie 파일을 다운받아 실습해 봅시다.


1. Lottie json 파일 다운

LottieFiles 사이트에 들어가면 bodymovin으로 만든 무료 Lottie json 파일을 다운받을 수 있습니다.

01


02

Lottie JSON 형태로 Download를 합니다.


03


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%)에 로티 이미지 너비의 절반을 뺀 값을 설정합니다.


04

로티 이미지가 적용된 웹 페이지 화면


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 플러그인을 설치합니다.

01-2


VS Code의 우하단에 위치한 Go Live를 클릭합니다.

01-1


그러면 아래와 같이 lottie test 화면이 웹브라우저에 열리는 것을 확인해 볼 수 있습니다.

05

GitHub에서 playground 프로젝트(v1.0.1)를 다운받아 볼 수 있습니다.


  • Lottie를 이용한 로딩화면 설정
  • Use Lottie animation in Html
  • Embed Lottie animations on website
300x250
반응형

TAG

  • 프로필사진
    궁금2021.04.12 15:08

    궁금한게 있는데요.
    js파일에서 아래와 같이 작성한 후에 html에서 불렀는데, 왜 lottie 애니메이션이 보이지 않을까요?..
    (※html src부분에 lottie url을 하드코딩해서 넣어주면 불러와집니다)

    [js파일]
    test : function () {
    $("#lottie1";).attr('src', "https://assets5.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json";)
    }

    [html 내용]
    <td width="300" height="200">
    <lottie-player id="lottie1" src="" background="transparent" style="width: 300px; height: 225px;" speed="1" loop autoplay>
    </lottie-player>
    </td>

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

    • 프로필사진
      BlogIcon 저도궁금2022.03.18 12:28

      그러게요 왜 안될까요??
      바닐라 자바스크립트 load를 써도 안 되는군요

    • 프로필사진
      Favicon of https://blog.jiniworld.me BlogIcon jiniya222022.04.04 16:27 신고

      참고할 수 있도록 GitHub에 코드를 추가하고 VS Code로 테스트할 수 있도록 설명을 추가했습니다.