IOS - 간단한 Swift Lottie 라이브러리 사용법

Lottie는 에어비앤비사에서 개발한 라이브러리로 adobe after effects로 만든 애니메이션을  IOS에서(다른 플랫폼도 가능!) 손쉽게 사용하게끔 도와주는 라이브러리입니다.

 

Lottie

설치방법
1. Cocoapods를 이용해 설치합니다.
2. 터미널을 열고 lottie를 이용할 프로젝트 디랙토리로 이동합니다.
Tip("$ls" : 현재 디렉토리에 모든 폴더와 파일을 보여줌, "$cd 폴더명" : 해당 폴더로 이동)
3. "$pod init" 로 pod 초기화
4. "$ls"를 입력하면 Podfile이란 이름의 파일이 보입니다. "$vim Podfile" vim으로 해당 파일을 엽니다.
5. 텍스트를 보면 가운데 쯤 "# Pods for 프로젝트명" 부분이 보일텐데 바로 아래에 pod 'lottie-ios'라고 입력하고 저장합니다.
Tip(vim 명령어 i 입력모드, esc 누르면 다시 탐색모드, :qw 저장 및 나가기.)
6. "$pod install"을 입력하면 라이브러리를 설치합니다. 다른 라이브러리들도 위와 같은 방법으로 추가 하면 됩니다. 참고로 특정 라이브러리를 삭제하고 싶다면 Podfile에서 입력한 pod "라이브러리 이름" 부분을 지워준뒤 다시 "pod install"을 하면 알아서 remove 해줍니다.

 

 

Lottie 파일 준비
Lottie json 파일은 앞서 말한대로 애프터 이펙터에 Bodymovin이라는 플러그인을 설치하여 만들 수 있지만 애프터 이펙터를 사용할 줄 모르는 저와 같은 사람들을 위해 LottieFiles라는 사이트가 있습니다. 디자이너들이 만든 양질의 lottie json 파일들을 무료 또는 유료로 사용할 수 있습니다. 연습을 위해서 간단히 무료파일을 다운 받습니다.

LottieFiles

 

사용법
1. 프로젝트명.xcodeproj이 아닌 프로젝트명.xcworkspace 파일을 열어서 작업해야합니다.
2. 프로젝트 디랙토리에 lottie json 파일을 넣어줍니다.
3. import Lottie를 입력하여 realm 라이브러리를 불러옵니다.
4. 아래와 같은 코드로 lottie를 이용한 애니매이션뷰를 간단히 생성할 수 있습니다.

import Lottie

override func viewDidLoad() {
    super.viewDidLoad()
        let animationView = AnimationView(name: "test") // AnimationView(name: "lottie json 파일 이름")으로 애니메이션 뷰 생성
        animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300) // 애니메이션뷰의 크기 설정
        animationView.center = self.view.center // 애니메이션뷰의 위치설정
        animationView.contentMode = .scaleAspectFill // 애니메이션뷰의 콘텐트모드 설정
            
        view.addSubview(animationView) // 애니메이션뷰를 메인뷰에 추가
        
        animationView.play() // 애미메이션뷰 실행
}