lottie3 [JS] Lottie Animation 사용 방법 Lottie Animation을 Json 형태로 가져와 벡터 이미지를 Web에 뿌려줄 수 있습니다. 오늘은 Lottie Animation 사용하는 방법에 대해 알아 보도록 하겠습니다. Lottie Animation LottieA Animation은 에어비앤비에서 개발한 라이브러리입니다. After Effects로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 html, webflow, android, iOS 환경에서 이용할 수 있습니다. Lottie Animation은 벡터 기반의 애니메이션인데 즉, SVG로 저장됩니다. TIP 벡터 이미지란? 벡터 이미지는 png, jpg등과 다르게 용량이 적고 해상도 저하가 일어나지 않는다는 장점이 있습니다. Lottie 사용 방법 lo.. FRONT-END/JAVASCRIPT 2022. 8. 16. SwiftUI Project4 : Lottie 애니메이션으로 카드만들기 Lottie 애니메이션 1. 세팅 Xcode의 프로젝트 이름은 LottieCard라고 정해주고 프로젝트 안에 Lottie 애니메이션을 사용할 수 있도록 세팅을 해줍니다. Lottle 애니메이션 세팅 방법 알아보러 가기 ContetView에 화면을 구성해주기 위해 재사용 될 수 있는 CardView를 먼저 만들어주겠습니다. 새로운 SwiftUI 파일을 생성후 이름은 'Lottie Card' 라고 정해주고 아래와 같이 코드를 작성해줍니다. //LottieCard import SwiftUI struct LottieCard: View { var title = "서근 개발블로그 카드" var icon = "faceid" var animate = "A" var color1 = Color(Literal()) var .. PROJECT/Simple 2021. 2. 10. SwiftUI : Lottie Animation(애니메이션) Lottie Animation SwiftUI에서 Lottie Animaiton을 사용하는 방법에 대해 알아보도록 하겠습니다. 우선, 로티애니메이션을 사용하려면 cocoapods등을 통하여 Xcode 프로젝트에 추가해줘야합니다. 설치방법 1. airbnb - lottie-ios의 code 주소를 복사합니다. https://github.com/airbnb/lottie-ios.git 2. 프로젝트를 열고 File 👉🏻 Swift Packages 👉🏻 Add Package Dependency를 누른다. 3. 위 코드 주소를 넣고 설치를 진행합니다. (첫 설치시, 사용자의 컴퓨터 성능에 따라 시간이 소요 될 수 있습니다.) 4. Lottie가 설치 되었다면, 새로운 Swift File을 만들어 이름은 'Lotti.. SWIFTUI/View layout 2021. 2. 10. 이전 1 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기