Lottie 사용하여 로딩 애니메이션 json 만들기(+ path 오류 수정)

*이 글은 자세한 원리는 모르겠고 빠르고 간단하게 애니메이션을 제작하여 json으로 화면에 넣고싶은 분들을 위한 글입니다 . . .

동그라미가 하나씩 위아래로 움직이는 로딩 애니메이션을 제작해보겠습니다 ~

CSS 말고 애니메이션 효과를 줄 수 있는 방법을 찾아보다가 Lottie 라는 것을 발견!
하지만 ... ! Lottie Lab, Lottie Creator 등등 선택 옵션도 많고 애니메이션을 그릴 수 있는 Lottie 프로그램도 사용하기 어려워보이고 .. 다들 사용하신 분들이 많던데 어떻게 하신건가요 !!
어찌저찌 유튜브에서 강의 영상도 찾고 해서 '이게 왜 되지...?' 감성으로 완성했습니다.

후비고 ~!

1. Lottie 작업 환경 준비

https://creator.lottiefiles.com/
해당 사이트에서 회원가입하고 로그인해서 작업할 준비를 합니다.
반드시 로그인 하시구 왼쪽 상단의 로고 클릭해서 'Go to dashboard' 클릭해서 작업 파일이 잘 생성됐는지 확인하고 작업하세요. (저는 로그인을 안하고 작업해서 2번 일했답니다^^)

위와 같은 화면이 준비가 되면 됩니다!

2. 로딩 애니메이션 제작하기

• 왼쪽 상단에서 동그라미를 선택하여 5개를 그려줍니다
  
  

• 키프레임 추가하기
  키프레임이란 요소에 적용할 애니메이션 .. 이라고 저는 이해했습니다! ㅎㅎ;
  먼저 첫번째 동그라미 Ellipse1을 클릭한 후 오른쪽 패널에서 y축 옆에 있는 마름모를 클릭하면 키프레임이 추가됩니다. 하단에 키프레임 패널(?)을 보면 Ellipse1에 굵은 화살표(?)가 생긴걸 볼 수 있습니다. 사진에 빨간 박스를 봐주세요 (물음표가 많은데 저도 하면서 물음표 투성이었습니다 8^8)
  
  저 굵은 화살표는 저 시점부터 애니메이션을 적용하겠다는 표시입니다!

• 위아래로 움직이는 키프레임 적용하기
  기본 세팅을 보면 전체 애니메이션 길이가 5초 입니다.
  하단의 키프레임 패널에 숫자가 함께 붙어있는 주황색 작대기가 있습니다!
  이것을 움직일 수 있는데 오늘쪽 끝까지 옮겨보면 149까지 있습니다.
  저는 이것을 편하게 시점이라고 부르겠습니다.
  저는 10시점 동안 동그라미가 위로 올라가고, 10시점 동안 아래로 내려오는 효과를 주겠습니다.
  이부분이 제일 어려우니 여기만 잘 봐주세요!
  1) 주황색 작대기를 10 시점으로 옮겨줍니다
  
  2) Ellipse1 의 높이를 위로 올려줍니다
  높이를 수정하면 키프레임 패널의 Ellipse1 영역에 마름모가 생긴걸 볼 수 있습니다
  
  3) 주황색 작대기를 20 시점으로 옮기고 높이를 원래 높이로 내려줍니다
  이번에도 마찬가지로 20시점에 마름모가 생긴걸 볼 수 있습니다
  
  4) 다른 동그라미도 키프레임 적용해주기
  위 작업을 다른 동그라미도 동일하게 클릭하여 적용해주면 됩니다!
  순차적으로 하기 위해서는 Ellipse2는 21 시점부터 y축 옆에 있는 마름모를 클릭하여, 31시점, 41점에 각각 높이를 바꿔주면 되겠죠?!
  재생 버튼을 눌러 애니메이션이 적용된 모습을 확인해볼수 있어요

3. JSON 파일로 추출하기

애니메이션을 다 제작했으면 JSON 파일로 추출하겠습니다
오른쪽 상단에 export 버튼을 눌러 추출하면 사진과 같은 새로운 창이 뜹니다.

여기 오른쪽 패널에 Lottie JSON 이라는 옵션을 선택하여 다운로드 합니다!
더 압축된 용량의 다른 옵션도 존재합니다. 필요에 따라 gif 등의 파일 포맷으로도 추출이 가능해요

4. vue2 에 lottie 설치하고 json 파일 렌더링하기

• 먼저 다운받은 json 파일을 프로젝트 소스파일의 project 폴더 아래에 넣어줍니다
• lottie-web 라이브러리를 설치해줍니다

npm install lottie-web

• id 속성을 사용하여 json 파일을 렌더링하기

<template>
	<div id="loading"></div>
</template>
<script>
import lottie from 'lottie-web';

mounted(){
	lottie.loadAnimation({
	      container: document.getElementById('loading'),
	      renderer: 'svg',
	      loop: true,
	      autoplay: true,
	      path: '/dot_loading.json' // the path to the animation json
	    });
}
</script>

renderer는 svg, canvas 등의 옵션이 있는데 어떤 타입으로 렌더링 할지 선택하는 옵션입니다.
loop, autoplay는 애니메이션의 반복 여부, 자동 재생 여부 옵션이고, path는 json 파일의 경로를 작성해주면 됩니다

5. 완성 ~!

이렇게 하면 화면에 json 애니메이션이 잘 출력됩니다~
제가 설명이 부족했거나 잘못된 정보가 있다면 댓글로 문의해주세요 ㅎㅎ
감사합니다~

+ path 오류 수정

webpack 빌드 후 dot_loading.json 을 찾지 못하는 Not Found 오류가 발생했다.
https://github.com/airbnb/lottie-web/wiki/loadAnimation-options
깃헙 문서에서 옵션 설명을 찾아보다가 path 옵션은 외부 json 파일에 대한 경로이고, json object는 animationData 키를 사용해야 한다는것 같아서 animationData 로 바꿔주니 오류 해결 . . !!

<template>
	<div id="loading"></div>
</template>
<script>
import lottie from 'lottie-web';
import loadingFile from './dot_loading.json';

mounted(){
	lottie.loadAnimation({
	      container: document.getElementById('loading'),
	      renderer: 'svg',
	      loop: true,
	      autoplay: true,
	      animationData: loadingFile // the path to the animation json
	    });
}
</script>