[swift] Swift Core Animation을 사용한 화면 전환 효과

07 Dec 2023

swift

앱의 사용자 경험을 향상시키기 위해서는 화면 전환 효과를 추가하는 것이 중요합니다. Swift 프로그래밍 언어에서는 Core Animation 프레임워크를 사용하여 간단하고 멋진 화면 전환 효과를 구현할 수 있습니다.

이 튜토리얼에서는 Swift의 Core Animation을 사용하여 화면 전환 효과를 구현하는 방법에 대해 알아보겠습니다.

1. CALayer와 CATransition

Core Animation의 핵심 개념은 CALayer와 CATransition입니다. CALayer는 애니메이션이나 그림을 그리기 위한 객체로, 앱의 뷰 계층 구조를 나타내는 역할을 합니다. CATransition은 CALayer의 애니메이션 전환 효과를 나타내는 객체입니다.

먼저, 앱에서 화면 전환을 적용할 두 개의 뷰 컨트롤러를 생성합니다. 각 ViewController에는 CALayer 객체를 추가하여 애니메이션 효과를 제공할 준비를 합니다.

import UIKit

class ViewController1: UIViewController {
    let transition = CATransition()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let layer = view.layer
        layer.backgroundColor = UIColor.red.cgColor
    }
    
    // 화면 전환 메서드
    func transitionToViewController2() {
        let viewController2 = ViewController2()
        
        // 화면 전환 효과 설정
        transition.duration = 0.5
        transition.type = CATransitionType.push
        transition.subtype = CATransitionSubtype.fromRight
        view.window?.layer.add(transition, forKey: kCATransition)
        
        // ViewController2로 전환
        present(viewController2, animated: false, completion: nil)
    }
}

class ViewController2: UIViewController {
    let transition = CATransition()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let layer = view.layer
        layer.backgroundColor = UIColor.blue.cgColor
    }
    
    // 화면 전환 메서드
    func transitionToViewController1() {
        let viewController1 = ViewController1()
        
        // 화면 전환 효과 설정
        transition.duration = 0.5
        transition.type = CATransitionType.push
        transition.subtype = CATransitionSubtype.fromLeft
        view.window?.layer.add(transition, forKey: kCATransition)
        
        // ViewController1로 전환
        present(viewController1, animated: false, completion: nil)
    }
}

위의 코드에서는 ViewController1과 ViewController2를 생성하고, 각 ViewController에 CALayer 객체를 추가합니다. 그리고 각각의 ViewController 내에 화면 전환 메서드를 정의하고, 이 메서드 내에서 화면 전환 효과를 설정합니다.

2. 버튼에 액션 연결

화면 전환을 트리거하는 버튼을 추가하고, 해당 버튼의 액션을 ViewController1과 ViewController2의 화면 전환 메서드와 연결합니다.

class ViewController1: UIViewController {
    // ...

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 화면 전환 버튼 생성 및 액션 연결
        let button = UIButton(type: .system)
        button.setTitle("Go to ViewController2", for: [])
        button.addTarget(self, action: #selector(transitionToViewController2), for: .touchUpInside)
        button.sizeToFit()
        button.center = view.center
        
        view.addSubview(button)
    }
    
    // ...
}

class ViewController2: UIViewController {
    // ...

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 화면 전환 버튼 생성 및 액션 연결
        let button = UIButton(type: .system)
        button.setTitle("Go to ViewController1", for: [])
        button.addTarget(self, action: #selector(transitionToViewController1), for: .touchUpInside)
        button.sizeToFit()
        button.center = view.center
        
        view.addSubview(button)
    }
    
    // ...
}

위의 코드에서는 버튼을 생성하고 화면 전환 메서드를 액션으로 설정하여 버튼과 연결합니다. 이제 각 ViewController에 버튼이 추가되고, 버튼을 클릭하면 화면 전환이 이루어집니다.

3. 화면 전환 효과 적용

화면 전환 효과를 적용하기 위해서는 화면 전환 메서드에서 CATransition 객체를 생성하고, 그 속성을 설정해야 합니다. 이 예제에서는 push 전환 효과를 사용하며, 시간은 0.5초로 설정합니다.

ViewController1에서 ViewController2로 전환할 때는 오른쪽에서 왼쪽으로 푸시되는 효과를 적용하고, ViewController2에서 ViewController1로 전환할 때는 왼쪽에서 오른쪽으로 푸시되는 효과를 적용합니다.

이와 같이 전환 효과를 적용하기 위해 네비게이션에서 사용하는 push, pop, present, dismiss 등의 메서드 대신 CATransition 객체를 사용하여 전환 효과를 설정할 수 있습니다.

결론

이제 Swift Core Animation을 사용하여 화면 전환 효과를 쉽게 구현할 수 있습니다. CALayer와 CATransition을 활용하여 앱의 사용자 경험을 향상시키는 멋진 화면 전환 효과를 구현해보세요.

1. CALayer와 CATransition

2. 버튼에 액션 연결

3. 화면 전환 효과 적용

결론

참고 자료