[iOS] Lottie 애니메이션 사용하기

Lottie - Github

GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations

https://lottiefiles.com/kr/

무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi

 

 

Lottie 는 ?

 

• Airbnb 에서 만든 라이브러리이며 vector 기반의 animation효과들을 최소한의 코드로 구현할 수 있게 해준다.
• Adoe After Effect 에 BodyMovin plugin 과 Lottiefiles plugin을 사용해서 JSON 포맷으로 export 가능케한다.
• JSON 포맷으로 만들어진 animation 리소스파일을 load하고 rendering해준다.

 

 

SPM으로 추가하기

 

SPM에 URL: https://github.com/airbnb/lottie-spm.git 을 입력하고 Add Package 하여 사용했다.

 

 

코드 예제

 

import UIKit
import Lottie

class HomeViewController: UIViewController {

    let animationView: LottieAnimationView = {
        let view = LottieAnimationView(name: "animation_netflix")
        view.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
        view.contentMode = .scaleAspectFill
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(animationView)
        animationView.center = view.center
        animationView.play() { isFinished in
        	
            // 애니메이션이 끝난 뒤에 해야할 행동 정의
            self.animationView.removeFromSuperview()
        }
    }
}

 

 

AutoLayout 으로 Layout해도 문제가 없다.

import UIKit
import Lottie

class HomeViewController: UIViewController {

    let animationView: LottieAnimationView = {
        let view = LottieAnimationView(name: "animation_netflix")
        view.contentMode = .scaleAspectFit
        
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(animationView)
        animationView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            animationView.centerYAnchor.constraint(
            	equalTo: view.centerYAnchor),
            animationView.leadingAnchor.constraint(
            	equalTo: view.leadingAnchor,constant: 16),
            animationView.trailingAnchor.constraint(
            	equalTo: view.trailingAnchor, constant: -16),
            animationView.heightAnchor.constraint(equalToConstant: 400),
        ])

        animationView.play() { isFinished in
        	// 애니메이션이 끝난 뒤에 해야할 행동 정의
            self.animationView.removeFromSuperview()
        }
    }
}

 

 

Lottie를 사용하여 쉽게 애니메이션을 사용 할 수 있습니다 !