[iOS] Lottie 사용해보기

🐹 Lottie ?

Lottie는 에어비앤비에서 제공하는 애니메이션 라이브러리이다.
gif로 구현하는 것보다 훨씬 작은 용량을 차지한다고 한다.
서버통신시 대기화면 모션이나 앱 시작할때 로고 같은 곳에 적용하면 매우 귀여울 것 같다.

🐹 How to use?

pod 'lottie-ios'

우선 위를 이용하여 팟 설치를 해주어야 한다.

Lottie 깃허브

디테일한 내용은 위의 Lottie 깃허브 주소에 들어가보면 나와있다.

🐹 Lottie json 파일 사이트

json 사이트

위 링크로 들어가면 다양한 움직이는 이미지들을 다운받을 수 있다.
유료도 있고 무료도 있다.
나는 간단한 연습을 위해 무료 파일을 다운받았다.

🐹 간단하게 연습해보자!

버튼을 누를때마다 움직이게 구현을 해볼까? 생각을 했다.

우선 스토리보드에 이렇게 버튼을 하나 달아두었다.

그리고 프로젝트에 다운받은 파일을 추가해주었다.

import UIKit
import Lottie

class ViewController: UIViewController {

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

    @IBAction func lottieClicked(_ sender: Any) {

        animationView.play() // 애미메이션뷰 실행
        
    }
    
}

🐹 실행 화면

귀엽네요 :) 대기시간이 필요한 화면에 사용하면 좋을 것 같아요 !