본문 바로가기

Lottie2

[HTML / CSS] Lottie 이용해보기 안녕하세요. 이번 시간에는 Web에서 로티를 이용해서 애니메이션을 만들어 보겠습니다. 오늘은 바로 시작해보겠습니다. 1. 로티가 들어갈 html 태그를 생성합니다. 2. bodymovin library 준비하기 Lottie Docs 목록에서 Web 태그로 이동합시다. 아래 페이지에 링크로 들어갑니다. 라이브러리 소스를 다운해줍니다. 3. Lottie 파일을 준비한다. Lottie 파일을 준비하는 방법에는 2가지가 있습니다. 3-1. URL 방법 3-2. SON형태로 다운로드. 4-1. 로티를 넣을 파일.html 이렇게 준비하신 파일을 html, javascript에 아래처럼 작성해주시면 Lottie를 작성할 수 있습니다. 4-2. 로티 파일이 들어간.js var anmation = bodymovin.lo.. 2021. 9. 21.
[Java][Android] Lottie 라이브러리 사용하여 로딩화면 만들기 Lottie 라이브러리란? Lottie 라이브러리는 Airbnb 에서 만든 애니메이션 오픈소스 라이브러리이다. 오늘은 Lottie를 사용하여 지루한 로딩화면을 레이아웃을 더 생동감 있게 꾸며보겠습니다. 확실히 Lottie 라이브러리를 사용하면 생동감이 넘치고 , 앱의 퀄리티가 더 좋아보여서 저는 자주 사용하곤 합니다 :) Lottie 애니메이션 사용법 우선 Lottie 라이브러리를 사용하기 위해서는 build.gradle 파일의 의존성 설정에 추가합니다. implementation 'com.airbnb.android:lottie:3.5.0' 그 다음, 아래에 사이트에서 원하시는 애니메이션을 고르면 됩니다. 이 사이트에는 다른사람들이 만들어 놓은 json 파일들이 있습니다. (무료도 있고 , 유료도 있습니.. 2021. 3. 3.