[iOS] Lottie 사용하기

SPM 으로 Lottie 라이브러리를 추가하고 사용하는 방법을 알아 보겠습니다.

 

1. SPM 으로 Lottie 라이브러리 추가하기

    - Project 를 선택하고, '+' 버튼을 클릭합니다.

 

2. 검색창에 아래의 Lottie 라이브러리 주소를 입력하고, Add Package 버튼을 클릭합니다.

     - https://github.com/airbnb/lottie-spm.git

 

3. 아래 팝업화면에서 Add Package 버턴을 클릭합니다.

 

4. 아래와 같이 Lottie 라이브러리가 추가되었습니다.

 

5. Lottie 애니메이션 파일을 아래 사이트에서 다운로드 받습니다.

    - https://lottiefiles.com/featured

Featured animations from our community

 

6. 다운로든 받은 "love.json" Lottie 파일을 추가해 줍니다.

 

7. ViewController에서 Lottie 를 재생합니다.

import UIKit
import Lottie

class SplashViewController: UIViewController {
    
    private lazy var lottieView: LottieAnimationView = {
        let lottieView = LottieAnimationView(name: "love")
        lottieView.contentMode = .scaleAspectFill
        lottieView.loopMode = .loop
        lottieView.animationSpeed = 0.2
        return lottieView
    }()

   override func viewDidLoad() {
       super.viewDidLoad()
       self.view.backgroundColor = .systemOrange
       
       setLayout()
       self.lottieView.play()
   }
    
    private func setLayout() {
        [lottieView].forEach {
            view.addSubview($0)
        }
        
        lottieView.translatesAutoresizingMaskIntoConstraints = false
        
        let topConstraint = NSLayoutConstraint(item: lottieView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: view.frame.height * 0.18)
        let widthConstraint = NSLayoutConstraint(item: lottieView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 170)
        let heightConstraint = NSLayoutConstraint(item: lottieView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 123)
        let centerXConstraint = NSLayoutConstraint(item: lottieView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0)

        view.addConstraints([topConstraint, widthConstraint, heightConstraint, centerXConstraint])
    }

}

 

8. 이제 프로젝트를 실행하면 Lottie 애니메이션이 잘 동작하는 것을 확인할 수 있습니다.