[IOS] 로티(Lottie) 애니메이션 뷰를 화면 중앙에 위치시키는 방법

16 Aug 2023

로티(Lottie)는 After Effects에서 만든 애니메이션을 JSON 파일로 내보내고, 이를 iOS, Android, 웹 등에서 사용할 수 있도록 지원하는 라이브러리입니다. 로티 애니메이션의 위치를 변경하는 방법은 해당 라이브러리를 사용하는 플랫폼에 따라 다르지만, iOS에서는 다음과 같은 방법으로 위치를 변경할 수 있습니다.

로티 애니메이션을 iOS 프로젝트에 추가하고, UIView에 해당 애니메이션을 추가합니다. 그런 다음, 로티 애니메이션의 위치를 변경하려면 해당 UIView의 frame 속성을 조정하면 됩니다. 예를 들어, 다음 코드는 애니메이션 뷰를 화면 중앙에 위치시키는 방법입니다.

import Lottie

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Lottie 애니메이션 뷰 추가
        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()
    }
    
}` 

위 코드에서 animation_file_name은 After Effects에서 로티 애니메이션을 만들 때 설정한 파일 이름입니다. 이를 로드하여 AnimationView에 추가하고, translatesAutoresizingMaskIntoConstraints 속성을 false로 설정하여 프로그래밍 방식으로 뷰의 위치를 조정합니다. 이 예제에서는 NSLayoutConstraint를 사용하여 뷰를 화면 중앙에 위치시키지만, 필요에 따라 다른 방법을 사용하여 위치를 조정할 수도 있습니다.