Lottie란?

Lottie는 말하지 않고 알려진 애니메이션 라이브러리로 몇 줄의 코드로 풍부한 애니메이션을 구현할 수 있습니다.

Lottie 파일이라고 불리는, Adobe After Effects 로부터 생성된 JSON 파일을, 읽어들여, 애니메이션을 표시시키기 위한 라이브러리입니다.

소위 비디오 플레이어적인 역할을 하는 것으로, Lottie 파일을 로드 시키면, 다양한 리치 애니메이션 실현할 수 있습니다.

소개

이번에는 cocoapod를 사용합니다. Podfile에 다음 줄을 추가하고 pod install

pod 'lottie-ios'

Lottie 파일 다운로드

여기 더 좋아하는 파일을 삭제하십시오. 이번 데모에서는 스케보 니이을 사용합니다.

기본 구현

먼저 DL 한 Lottie 파일을 프로젝트에 가져옵니다.

나중에 ViewController.swift에 다음 코드를 추가합니다.

import UIKit
import Lottie

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    // play lottie file
    let animationView = AnimationView(name: "41256-skateboarding")
    animationView.frame = view.bounds
    animationView.loopMode = .loop
    animationView.contentMode = .scaleAspectFit
    view.addSubview(animationView)
    animationView.play()
  }
}

레이어에 하위 뷰 추가

Lottie의 굉장한 점은 애니메이션을 재생할 뿐 아니라 지정된 애니메이션 레이어에 서브뷰를 추가할 수 있다는 것입니다. 문서

Lottie 애니메이션은 여러 애니메이션 레이어로 구성되어 있으며 각 레이어가 움직임으로써 리치 애니메이션을 실현하고 있습니다. 해당 레이어에 하위 뷰를 추가하여 하위 뷰를 레이어의 일부로 애니메이션을 만들 수 있습니다.

Lottie Editor 에서 방금 DL 한 파일을 읽어 보겠습니다.



왼쪽에 보이는 것이 레이어입니다. 구현 단계에서 레이어 이름이 필요합니다.

구현

이번에는 스케보 형의 얼굴을 바꿔 봅시다. 문서에서 볼 수 있듯이 어떤 레이어에 하위 뷰를 추가할지 결정해야 합니다. 이번에는 얼굴을 바꾸는 것으로, 레이어 “head”에 서브뷰를 추가합니다.

import UIKit
import Lottie

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    // play lottie file
    let animationView = AnimationView(name: "41256-skateboarding")
    animationView.frame = view.bounds
    animationView.loopMode = .loop
    animationView.contentMode = .scaleAspectFit
    view.addSubview(animationView)

    // add label to replace face
    let path = AnimationKeypath(keypath: "head")
    let faceSubview = AnimationSubview()
    let faceLabel = UILabel()
    faceLabel.backgroundColor = .white
    faceLabel.frame = CGRect(x: -50, y: -450, width: 200, height: 200)
    faceLabel.text = "(ﾟωﾟ)"
    faceLabel.textAlignment = .center
    faceLabel.layer.cornerRadius = 100
    faceLabel.clipsToBounds = true
    faceLabel.font = UIFont.boldSystemFont(ofSize: 60)
    faceSubview.addSubview(faceLabel)
    animationView.addSubview(faceSubview, forLayerAt: path)

    animationView.play()
  }
}

멋지게 얼굴이 대체되어 움직임에 맞게 새로운 얼굴의 위치, 각도까지 바뀌고 있군요!

「x, y좌표가 고정되어 있지만, 애니메이션의 프레임 사이즈 바뀌면 얼굴의 위치 어긋나는 것은?」라고 생각한 분도 있다고 생각합니다.

저도 거기는 신경이 쓰였지만 그 걱정은 없었습니다. 어떤 프레임 크기에서도 얼굴의 위치가 어긋나지 않았습니다.

유저의 프로필 화상을 짜넣은 애니메이션을 만들거나, 여러가지 일에 응용할 수 있다고 생각합니다.

마지막으로

Lottie에 관해서 여기 에서 좀 더 자세하고 있었으므로, 흥미있는 분은 들여다 봐 주면 기쁩니다.

Happy Coding!