[Swift iOS] Lottie Animation 적용하기 (+ multiple animation)

 

import UIKit
import Lottie

class ViewController: UIViewController {
    var animationView: AnimationView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        animationView = .init(name: "coffee")
        animationView?.frame = view.bounds
        animationView?.loopMode = .loop
        animationView?.animationSpeed = 0.5     //1이 기본 속도, 클수록 빨라짐
        view.addSubview(animationView)
        animationView?.play()
        //view.sendSubviewToBack(animationView!)
        animationView.backgroundColor = .clear
    }
}

 

 

Lottie 애니메이션 적용은 간단하게 가능하다. 

 

그런데 여러가지 애니메이션을 연달아 넣어야 할 일이 있어 찾아보니, 애니메이션 파일을 교체하거나 다른 애니매이션으로 넘기는 건 따로 코드로 지원이 안되는 것 같더라.

 

구글링 및 gpt 에게 물어보니 요런 식으로 하면 된다더니 안됨,, 

func replaceAnimation() {
    animationView.animation = Animation.named("new_animation_filename")
    animationView.play()
}

애니메이션 대신 뷰 자체를 갈아끼우는 방식으로 구현하면 야매로 어떻게 해볼 수 있을 것 같기는 하지만 굳이..? ㅎ

 

디자이너분께 말씀드려서 여러개로 나뉘어져 있던 애니메이션 파일을 하나로 합쳐달라고 요청을 드렸다. 

하나의 애니매이션 파일을 frame 으로 나눠서 play 해주면 loop mode 도 계속 바꿀 수 있고, 애니메이션 연결도 자연스럽고 좋더라. 

 

1. enum 으로 원하는 frame을 미리 선언해둔다.

enum RonyKeyFrames: CGFloat {
    case start = 0
    case openMessage = 151
    case showLuckyMessage = 367
    case end = 589
}

2. Lottie 애니메이션 초기화 세팅 해주기

import UIKit
import Lottie

class ViewController: UIViewController {
    private lazy var animationView = LottieAnimationView(name: "luckyMessage")
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        animationView.play(fromFrame: RonyKeyFrames.start.rawValue,
                             toFrame: RonyKeyFrames.openMessage.rawValue,
                             loopMode: .loop)
    }
}

3. 애니메이션 터치 시 다음 애니매이션으로 넘기기

animationView.rx.tapGesture()
    .when(.recognized)
    .take(1)
    .subscribe(onNext: { [weak self] _ in
        self?.animationView.play(toFrame: KeyFrames.showRony.rawValue, loopMode: .playOnce) { (finished) in
            self?.showRony()
        }
        UILabel.animate(withDuration: 0.5, animations: {
            self?.checkitLabel.alpha = 0
        }, completion: { _ in
            self?.checkitLabel.text = "두근두근.. 행운을 꺼내보는 중입니다."
            UILabel.animate(withDuration: 0.5, animations: {
                self?.checkitLabel.alpha = 1
            })
        })
    })
    .disposed(by: disposeBag)

 

 

 

앱스토어에서 LottieFiles 다운받으면 json 파일을 재생해볼 수 있고, frame 도 편하게 확인할 수 있다. 귀여워 ><

 

 

 

https://lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles

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

LottieFiles/lottie-ios

https://www.youtube.com/watch?v=ZtIPsg07bb4