개요
After Effects 애니메이션을 실시간을 렌더링 하는 iOS, android, react-native, web 라이브러리이며,
Bodymovin 이라는 오픈소스를 이용한 After Effects 확장 기능을 사용해서 json 형식으로 추출한 애니메이션 데이터를 사용하여 웹상에서 애니메이션을 렌더링한다.
- Lottie 메인사이트: https://airbnb.design/lottie
- 소개: https://airbnb.design/introducing-lottie
- 가이드: http://airbnb.io/lottie/web/getting-started.html
- GitHub: https://github.com/airbnb/lottie-web
- 유저가 올리는 로티파일 Lottiefiles.com: https://www.lottiefiles.com
장점
- 리소스 절감
- gif 애니메이션보다 훨씬 작은 용량으로 제작되어 리소스를 대폭 줄일 수 있다.
- gif는 용량이 클 뿐만 아니라 고정된 크기로 렌더링 되기 때문에 해상도 대응이 어렵다. 하지만 json 데이터 파일로 제작하면 해상도에 제한이 없다는 장점이 있다.
- 편리함
- 기존에는 디자이너가 원하는 모션을 구현하기 위해서 디자이너에게 모든 수치를 받아서 애니메이션을 구현해야 했다. 하지만 Lottie를 사용함으로써 디자이너에게 json 파일을 받아 바로 개발에 적용시키기만 하면 되는 편리함이 생긴다.
- Keyframes vs Lottie
-
Keyframes는 2016년 11월에 Facebook에서 만든 애니메이션 라이브러리이다.
(Facebook 모바일 화면에서 보이는 여러가지 '좋아요' 애니메이션을 구현시 사용됨)
-
Lottie와 동일하게 After Effects로 애니메이션을 만들고 json 형식으로 추출하여 android, iOS, web에서 읽어 애니메이션을 렌더링할 수 있다.
-
Keyframes는 적은 용량의 애니메이션을 구현하려는 목적에 맞게 만들다 보니 스펙이 제한적인 반면, Lottie는 실제 After Effects에서 사용하는 다양한 효과들을 대부분 지원한다.
-
단점
코드 차원의 문제라기 보다는 현재, Bodymovin에서 json 파일로 추출할 수 있는 After Effects 플러그인의 한계가 있다. 관련한 여러가지 이슈들이 등록되었으며 버전업을 통해 차차 개선중이다.
이슈 : https://github.com/airbnb/lottie-web/issues
빠른참조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Welcome to jiniworld (test)!">
<title>test page</title>
</head>
<body>
<h1>Lottie json 이미지 파일 이용하기</h1>
<div style="position:absolute; top: calc(50vh - 112.5px); left: calc(50vw - 150px);">
<lottie-player src="https://assets5.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay >
</lottie-player>
</div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>
</html>
See the Pen JjdywgQ by 최충현 (@nenara) on CodePen.
참고로.. ie edge 에서는 표시되지 않았다..
참고 : https://beecomci.tistory.com/54
'프론트엔드 개발 놀이터 > css, design' 카테고리의 다른 글
| Base64 이미지 사용하기 (0) | 2020.03.05 |
|---|---|
| [CSS] 박스 세로 가운데 중앙 정렬 6가지 css 정렬 html 정렬 center middle (0) | 2020.03.03 |
| Flat Color Hex Codes (0) | 2020.02.27 |
| 파비콘(Favicon)의 모든 것 (0) | 2020.02.24 |
| CSS3 미디어쿼리 @media 규칙 이해 (0) | 2020.02.21 |