[Lottie] #1 - Lottie 알아보기!

Animation 라이브러리

2016년 10월 기준으로 Vector Animation이 사람들에게 이야기되기 시작하였습니다.

 

2016.11 - FaceBook KeyFrame

2017.02 - Airbnb Lottie

 

 

 

Keyframe의 경우 최초 관심을 가지긴 하였지만, AfterEffect에서 작업할 수 있는 환경이 너무 힘이 들었다.

작은용량으로 애니메이션을 구현하는 게 목적이다 보니, 제한적일 수밖에 없었다.

 

• pre-composition 미지원
• Frame 소수점 단위 사용 불가 ( 29.7 = X )
• Group 사용은 추천하지 않습니다. (누락되어서 표기)
• Layer을 불러 오거나 하는 것보다 Path로 만드는 게 정신건강에 좋다

아래 Github링크에서 AfterEffect제작 예시를 볼 수 있다.

facebookincubator/Keyframes

 

Lottie는 ICS (API 14) 이상 지원하며, AfterEffects 애니메이션을 랜더링 하고 iOS, 안드로이드, 리액트 네이티브, 웹까지

모두 동작하는 애니메이션 라이브러리이다

 

Bodymovin이라는 Plugin을 설치해서 JSON 파일로 변환

 

Lottie Home Page에서 보여지는 적용 예시

 

 

 

Lottie 설치하기

ZXP Installer 이용하여, bodymovin을 설치하는 방식 (ZXP Installer는 Sketch에서도 Plug in 연동에 사용)

 

ZXP Installer설치

OS에 맞는 ZXP를 다운로드 설치한다. (필자는 Mac을 주로 사용한다 - Win도 설치되어있다)

ZXP Installer

 

위의 내용으로 설치가 되지 않는다면 아래 링크에서 다른 방식의 설치를 권장

airbnb/lottie-web

 

bodymovin 설치

해당 링크에서 bodymovin.zxp 다운로드

https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp

 

 

다운로드한 파일을 ZXP에 Drag 하여 진행 (향후 업데이트를 할 시에도 드래그하면 덮어쓰기로 가능)

 

AfterEffect의 경우 Menu > Windows > Extensions > BodyMovin 창 활성화가 가능

 

 

BodyMovin - Export

js / josn / Demo(Web)으로 출력이 가능하며, Android 개발 환경에 따라 old로 출력이 가능하다.

(필자의 경우 현업에 사용 중 개발 측에서 적용 안된다는 이슈를  old 형식으로 출력하여 해결하였다.)

 

File Size는 120 fps파일 기준으로 확인한 경우 큰 차이가 있다.

 

Png - 2.9 MB (png 120장)

Json - 17 KB (json 1 파일)

 

아래 링크에서는 Free json 및 Aep를 받을 수 있습니다.

Free After Effects files for Lottie Bodymovin animations

A micro-animations library

 

Json에 관심을 가지게 된 것은 AfterEffect로 UI Design을 구현 영상을 진행하면서

"이런 Animation이 구현될 수 있으면 얼마나 좋을까?" 라는 생각에서 시작되었습니다.

 

지금은 현업에 적용은 물론 Framer(Framer X)에도 사용을 하고 있으며,

기존 png sequence / Motion Guide 제작하던 시간을 축소할 수 있어, 긍정적이라 생각됩니다.