After Effects 모션 그래픽 iOS UIView에 적용하기(feat. Lottie)

Core Animation을 사용해서 복잡한 애니메이션을 구성하는 것은 여간 어려운게 아니다…

이를 해결해 줄 도구가 하나 있었으니 바로 Airbnb에서 만든 Lottie!

바로 애프터 이펙트 모션 그래픽을 추출해서 iOS의 View에서 재생시켜주는 도구이다.

요구사항

  1. 애프터 이펙트로 모션 그래픽을 만든다.
  2. 애프터 이펙트에 Bodymovin 플러그인을 설치하고 해당 익스텐션을 사용하여 json 포멧으로 추출한다.

저 부분은 내가 모션 그래픽 디자이너가 아니라 설명할 수 가 없다. 🤔

이도 저도 안되면 LottieFiles에서 애니메이션 파일을 하나 구해오도록 하자.

이제 라이브러리를 패키지 관리자로 추가한다

pod 'lottie-ios'

Bodymovin을 사용하여 추출한 모션 그래픽 파일을 프로젝트에 추가하고 애니메이션 뷰를 화면에 추가한다.

import UIKit

import Lottie

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let animationView = LOTAnimationView(name: "Animation")
        animationView.translatesAutoresizingMaskIntoConstraints = false
        
        self.view.addSubview(animationView)
        
        NSLayoutConstraint.activate([
            animationView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            animationView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
            animationView.widthAnchor.constraint(equalToConstant: 200.0),
            animationView.heightAnchor.constraint(equalToConstant: 200.0)
        ])
        
        animationView.loopAnimation = true
        animationView.play()
    }
}
그 결과!

Lottie를 사용하면 위와 같이 매우 간단하게 모션 그래픽을 뷰에 추가할 수 있다.