Home 로띠(Lotte) - 코드로 삽입하는 애니메이션
Post
Cancel

로띠(Lotte) - 코드로 삽입하는 애니메이션

들어가기

  • 동아리 활동 중 로띠를 활용하면 애니메이션이 즐거울 것 같다는 이야기를 들었다.
  • 로띠가 뭔지 바로 검색
  • 찾아보니 구글홈을 설정할 때 봤던 애니메이션이 로띠였다.

로띠 (Lottie)는?

lottieAnimation

  • 위키백과에서는 백터 애니메이션을 위한 파일 형식이라고 소개하고 있다.
  • 로띠에서는 JSON 파일을 사용한다.
  • 따라서 파일 내부를 열어 보면 SVG처럼 뭔가 읽을 수 있는 코드를 볼 수 있다.
  • 로띠 라이브러리를 사용해서 JSON파일을 애니메이션으로 출력할 수 있다.

장점

  • 용량이 작다.
    • 공식 홈페이지에서 소개하는 예시에 따르면 gif파일보다 600%더 작다고 한다.
    • 위에 삽입한 애니메이션의 경우 Lottie는 56KB GIF 파일은 375KB이다.
  • 크기가 커져도 깨지지 않는다.
    • 백터 기반이기 때문에 크기가 커진다고 해도 자연스럽다.
    • 그래서 크기가 큰 이미지의 경우 Lottie가 훨씬 용량이 작을 것이다.

단점

  • 컴퓨터 자원을 활용한다.
    • 단순하게 이미지를 순서대로 보여주는 것이 아니다. (GIF 애니메이션)
    • 따라서 컴퓨터가 애니메이션을 표현하기 위해 계산이 들어가야 한다.
    • (하지만, 이미지 여러장을 처리하는 것보다 애니메이션을 계산하여 처리하는게 더 빠를지도…)

Reference

This post is licensed under CC BY 4.0 by the author.