[swift] UIKit Dynamics의 화면 전환 애니메이션

20 Dec 2023

swift

UIKit Dynamics는 iOS 애플리케이션에서 물리 법칙을 사용하여 화면 요소를 자연스럽게 애니메이션할 수 있게 해주는 프레임워크입니다. 화면 전환 애니메이션을 구현하는 데에 UIKit Dynamics를 사용하면 물리적 특성을 활용하여 보다 생동감 있고 자유로운 애니메이션을 만들 수 있습니다.

기본 애니메이션 설정

먼저, UIKit Dynamics를 이용한 화면 전환 애니메이션을 구현하기 위해 아래와 같이 기본적인 애니메이션 설정을 수행해야 합니다.

import UIKit

class ViewController: UIViewController {
    var animator: UIDynamicAnimator!

    override func viewDidLoad() {
        super.viewDidLoad()
        // UIDynamicAnimator 초기화
        animator = UIDynamicAnimator(referenceView: view)
        // 애니메이션을 위한 뷰 설정
        let targetView = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        targetView.backgroundColor = UIColor.red
        view.addSubview(targetView)
    }
}

위 코드에서 UIDynamicAnimator를 초기화하여 화면에 물리적 효과를 주기 위한 기본 설정을 하였습니다.

애니메이션 적용

이어서, UIKit Dynamics를 이용하여 화면 전환 애니메이션을 적용해보겠습니다.

class ViewController: UIViewController {
    var animator: UIDynamicAnimator!
    var snapBehavior: UISnapBehavior!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // UIDynamicAnimator 초기화
        animator = UIDynamicAnimator(referenceView: view)
        
        // 애니메이션을 위한 뷰 설정
        let targetView = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        targetView.backgroundColor = UIColor.red
        view.addSubview(targetView)

        // UISnapBehavior를 이용한 애니메이션 적용
        let snapPoint = CGPoint(x: view.center.x, y: view.center.y)
        snapBehavior = UISnapBehavior(item: targetView, snapTo: snapPoint)
        snapBehavior.damping = 0.5
        animator.addBehavior(snapBehavior)
    }
}

애니메이션을 적용하기 위해 UISnapBehavior를 만들고, 해당 애니메이션을 UIDynamicAnimator에 추가합니다.

애니메이션 실행

마지막으로, 애니메이션을 실행하여 화면 전환 효과를 확인해보겠습니다.

class ViewController: UIViewController {
    var animator: UIDynamicAnimator!
    var snapBehavior: UISnapBehavior!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ... (앞의 코드 생략)

        // 애니메이션 실행
        UIView.animate(withDuration: 1.0, animations: {
            // 원하는 애니메이션 실행
        }) { _ in
            // 애니메이션이 완료된 후 실행될 작업
        }
    }
}

위 코드에서 UIView.animate를 사용하여 실제 애니메이션을 실행하고, 애니메이션이 완료된 후의 작업을 설정할 수 있습니다.

위의 과정을 통해 UIKit Dynamics를 이용한 화면 전환 애니메이션을 구현할 수 있습니다. UIKit Dynamics를 활용하면 움직이는 뷰나 다양한 화면 전환에 물리 학적 특성을 적용하여 보다 생동감 있는 화면 전환이 가능해집니다.

참고 자료

Apple Developer Documentation - UIKit Dynamics

이상으로 UIKit Dynamics를 활용한 화면 전환 애니메이션에 대해 알아보았습니다.