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를 사용하면 위와 같이 매우 간단하게 모션 그래픽을 뷰에 추가할 수 있다.

UIScrollView 사용할 때 키보드 자동으로 닫기

UIScrollView 또는 이 뷰를 상속 하는 뷰(UITableView, UICollectionView 등)의 서브 뷰가 퍼스트 리스폰더 일 때, 해당 뷰를 드래그 할 때 키보드를 닫는 방법을 설정 할 수 있다.

UIScrollView에 keyboardDismissMode 프로퍼티가 있고, 이 값을 원하는 값으로 변경하면 된다.

기본값은 none이고 onDrag로 설정하면 드래그를 시작하면 무조건 키보드를 닫으며 interactive로 설정하면 키보드를 끌어서 닫을 수 있고 위로 당기면 취소할 수 있다.

UITableView의 셀에 텍스트 필드를 넣어서 사용자 입력 폼을 만들때 사용하면 편리하다. iOS 7.0 이전에는 직접 구현해서 만들어서 사용했는데 매우 편리하다.

특정 크기와 색상을 가지는 UIImage 객체 만들기

그냥 플랫한 이미지가 필요한 경우가 있는데(내비게이션 바의 쉐도우 이미지를 설정 한다거나?), 이때마다 이미지 리소스를 넣기는 귀찮으니 코드로 이미지를 만들어 보자.

코드

UIColor와 CGSize를 매개변수로 받는 convenience 생성자를 익스텐션으로 추가하고, 매개변수를 사용하여 이미지 컨텍스트를 만들어서 이미지 객체를 만들어서 초기화 한다.

진짜 언젠가는 쓸모가 있다…가뭄에 콩나듯