[Lottie] 웹 퍼블리싱 아이콘, 이미지 애니메이션 / 로티(Lottie) 사용법, web 적용

https://airbnb.design/introducing-lottie/

Lottie란?

Airbnb에서 제작한 애니메이션 구현 라이브러리이다.

활용 플로우는 다음과 같다.

 

• 애프터이펙트에 Bodymovin 플러그인을 설치
• 애프터이펙트로 애니메이션 작업
• 작업물을 .json 또는 .lottie 확장자로 추출
• lottie 라이브러리 import 후 간단한 스크립트 추가로 애니메이션 로드(웹, 앱 모두 가능)

 

 

 

 

활용

전달받은(또는 제작한) 소스를 웹에 적용시키는 방법을 알아보자.

소스상에서 lottie 라이브러리를 import 하는 방법으로는 cdn 방식과 download 후 직접 import 방식이 있다.

 

cdn : https://cdnjs.com/libraries/bodymovin

download : https://github.com/airbnb/lottie-web/tree/master/build/player

 

See the Pen by 황진규 (@zinggoo) on CodePen.

 

loadAnimation 함수에 전달하는 인자들을 간단히 살펴보면 다음과 같다.

 

• container : 애니메이션을 렌더링 할 DOM 요소
• renderer : 'svg' / 'canvas' / 'html' 렌더러 설정
• loop : true / false 반복 여부
• autoplay : true / false 즉시 실행 여부
• animationData : 애니메이션 데이터 개체
  (.json 파일 자체를 로드하고자 할 때에는 path 속성을 써서 애니메이션 파일 경로를 지정해주면 됨)

이 밖에도 다양한 옵션을 부여할 수 있으니 아래 주소를 둘러보면 좋을 것 같다.

https://airbnb.io/lottie/#/web?id=usage 

 

이상!