티스토리 뷰
오늘은 iOS 앱에 Lottie 애니메이션을 추가하는 법에 대해 학습하겠습니다!
Lottie란 ?
Airbnb에서 개발한 JSON형태로 애니메이션을 사용할 수 있는 라이브러리입니다.
주로, 모바일 앱을 실행할 때 splash screen 등을 구현하기 위해 사용됩니다.
Lottie
Behind the scenes of our new open-source animation tool
airbnb.design
먼저, XCODE project를 생성한 후 CocoaPods을 통해 'lottie-ios'를 설치해줍니다.
CocoaPods은 홈페이지에서 install, get started 또는 링크한 글을 따라서 설치해주시면 됩니다.
CocoaPods.org
CocoaPods is built with Ruby and is installable with the default Ruby available on macOS. We recommend you use the default ruby. Using the default Ruby install can require you to use sudo when installing gems. Further installation instructions are in the g
cocoapods.org
XCODE프로젝트에 코코아팟(CocoaPods) 설치하기
오늘은 XCODE 프로젝트에 CocoaPods를 설치해보겠습니다! CocoaPods란 ? 'CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. It has over 78 thousand libraries and is used in ove..
grape-world-dev.tistory.com
lottie 라이브러리를 설치한 후에, Lottie로 사용할 파일을 다운로드 합니다.
아래의 사이트에서 Lottie 파일을 다운받을 수 있습니다 .
LottieFiles - Free animation files built for Lottie
LottieFiles is a collection of animations designed for Lottie - gone are the days of bugging your developer
lottiefiles.com
사이트 접속 후 Animations 탭에서 마음에 드는 Lottie 애니메이션을 하나 선택합니다.
해당 애니메이션의 Download JSON > Lottie JSON 을 다운받습니다.
다운로드한 JSON file을 프로젝트에 추가합니다.
mainViewController에 Lottie를 import 한 후, 애니메이션 뷰를 만들어 다운로드한 Lottie파일의 이름을 입력해 연결해줍니다.
그 후 view가 로드되는 시점에 animationView를 실행한 후, 클로저를 이용해 Lottie 후 원하는 기능을 구현해주시면 됩니다!
끝-
'iOS > iOS 개발' 카테고리의 다른 글
| iOS - BlendShapes 활용하기 (0) | 2021.05.27 |
|---|---|
| ARKit - BlendShapes (0) | 2021.05.25 |
| iOS - Dispatch Queue (0) | 2021.05.21 |
| iOS ActionSheet 만들기 (0) | 2021.01.14 |
| XCODE프로젝트에 코코아팟(CocoaPods) 설치하기 (0) | 2020.11.29 |
- Total
- Today
- Yesterday
- 카카오인턴십
- DispatchQueue
- blendshape
- Lottie
- Swift weak
- Neo4j
- disposeBag
- rxswift6
- 알고리즘
- GraphDB
- Swift unowned
- 코코아팟
- Swift
- cocoapods
- blendshapes
- boj
- 백준
- coreml
- ARKit
- C++
- Reactivex
- Kotlin
- 안드로이드
- 백준온라인저지
- infallible
- SWEA
- rxswift
- 프로그래머스
- ios
- SwiftUI
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 |