[ios] Lottie library

lottie란?

Lottie는 최소한의 코드로 벡터 기반 애니메이션과 아트를 실시간으로 렌더링하는 Android 및 iOS용 모바일 라이브러리입니다.

Github

https://github.com/airbnb/lottie-ios

사용법

cocoaPod

pod 'lottie-ios'

podFile에 등록 했으면 아래와 같이 import를 할 수 있다.

import Lottie

애니매이션 사용해보기

위와 같이 Lottie 애니매이션을 사용하기 위해서 Lottie사이트에서 이미지를 우선 골라봅니다.

우측 상단에 Download버튼이 있는데 Lottie에서 사용하는 애니메이션의 확장 파일은 JSON이라는 것을 알 수 있습니다.

확장자가 .json인 파일을 다운 받았습니다.

복잡하게 생긴 JSON형태에 내용들을 확인 하실 수 있습니다.

위에 파일을 이름 변경해주고, 프로젝트에 추가해주었습니다.

import UIKit
import Lottie

class ViewController: UIViewController {

    // MARK: - constant Property
    let animationView: AnimationView = {
        let animationView: AnimationView = .init(name: "mark")
        
        return animationView
    }()
    
    // MARK: - viewController
    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
    }
    
    // MARK: - setup
    func setup() {
        addViews()
        setConstraints()
    }
    
    // MARK: - addViews
    func addViews() {
        view.addSubview(animationView)
    }
    
    // MARK: - setConstraints
    func setConstraints() {
        animationViewConstraints()
    }
    
    func animationViewConstraints() {
        animationView.translatesAutoresizingMaskIntoConstraints = false
        animationView.widthAnchor.constraint(equalToConstant: 200).isActive = true
        animationView.heightAnchor.constraint(equalToConstant: 200).isActive = true
        animationView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        animationView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }
}

1. 애니매이션을 추가하는 즉시함수를 만든다.
2. setup에서 view를 추가하고, autoLayout을 추가해준다.

고럼~~!

이렇게 추가 되는데 어라???? 움직이지가 않습니다.

애니매이션 형태로 보기위해서는 메서드를 직접 실행하여야 합니다.

재생하기

animationView.play()

애니매이션이 정상적으로 실행되지만, 딱 한번 실행되고 멈춰버린다.

따라서, 애니매이션에 반복을 설정해 주어야한다.

애니매이션 반복 설정

// 단 한번 실행
animationView.loopMode = .playOnce```
// 무한적으로 실행
animationView.loopMode = .loop
// 2번 실행 후 종료
animationView.loopMode = .repeat(2)

애니메이션 속도 설정

// 1.5배속
animationView.animationSpeed = 1.5

애니매이션 frame 설정

play시 초기화

        animationView.play(
            fromFrame: 0,
            toFrame: 0,
            loopMode: .loop,
            completion: nil
        )