lottie.md

lottie를 이용한 애니메이션

• mp4 vs lottie vs gif 렌더링 화질 및 프레임 비교
• mp4 vs lottie 파일 사이즈 비교
• lottie 퍼포먼스 스트레스 테스트(mp4에 비하여 여러개 렌더해도 브라우저가 느려지지 않음)

사용법

1. bodymovin이라는 플러그인을 사용하여 AfterEffect용 클립(composition)을 .json 형태로 저장(export).
2. https://aescripts.com/bodymovin/(결제창에 0원 입력할 것. 기부형 무료 플러그인임)
3. svg로 렌더링해야 하므로 이미지 처럼 native svg에서 사용할 수 없는 요소들은 제외(svg 내부 이미지의 경우 크로스브라우징 이슈가 있음.)
4. 배경은 투명으로 하고, 프레임도 그대로 적용되므로 프레임까지 설정하여 저장.

lottie 라이브러리 설치

2-1. cdn https://cdnjs.com/libraries/bodymovin 2-2. yarn or npm

yarn add lottie-web

3. lottie로 애니메이션 렌더

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  // 정적 파일 사용하기
  // path: 'scripts/data.json'
  animationData: jsonData // 직접 읽어들인 JSON Object
})

https://codepen.io/rabelais88/project/editor/ZBpPrM 예제