[IOS] 로티(Lottie) 재생 시간을 지정하는 방법

16 Aug 2023

로티(Lottie) 라이브러리를 사용하여 iOS 앱에서 애니메이션을 재생할 때, 재생 시간을 지정하는 방법은 다양합니다. 아래 예제는 Lottie 라이브러리의 AnimationView 클래스를 사용하여 애니메이션을 재생하면서, 애니메이션의 총 시간을 기준으로 일정한 시간(예: 5초)만큼만 재생하는 방법입니다.

import Lottie

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let animationView = AnimationView(name: "animation_file_name")
        view.addSubview(animationView)
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            animationView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            animationView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            animationView.widthAnchor.constraint(equalToConstant: 200),
            animationView.heightAnchor.constraint(equalToConstant: 200)
        ])
        
        animationView.play(completion: { (finished) in
            if finished {
                // 애니메이션이 완료된 후 실행할 코드 작성
                print("Animation finished")
            }
        })
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
            animationView.pause()
        }
    }

}` 

위 코드에서 animation_file_name은 After Effects에서 로티 애니메이션을 만들 때 설정한 파일 이름입니다. play(completion:) 메서드를 사용하여 애니메이션을 재생하면, 클로저를 통해 애니메이션이 완료될 때 실행할 코드를 작성할 수 있습니다. 이 예제에서는 클로저를 사용하여 애니메이션이 완료되면 “Animation finished”라는 메시지를 출력하도록 합니다.

DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) 코드는, 현재 시간으로부터 5초 후에 실행되도록 예약합니다. 이를 사용하여, 애니메이션 재생을 일정 시간(여기서는 5초)까지만 제한하고, pause() 메서드를 사용하여 애니메이션을 일시정지할 수 있습니다. 이 예제에서는 5초 후에 애니메이션을 일시정지하도록 구현했지만, 필요에 따라 다른 시간을 사용할 수도 있습니다.