[swift] Swift에서 애니메이션을 이용한 탭 바 모션 구현하기

07 Dec 2023

swift

앱 개발에서 탭 바(Tab Bar)는 다양한 화면을 손쉽게 전환할 수 있는 중요한 요소입니다. 때때로 탭 바에 애니메이션을 추가하여 더 흥미로운 사용자 경험을 제공할 수 있습니다. 이번에는 Swift 언어를 사용하여 탭 바에 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Step 1: 탭 바 설정하기

첫 번째로, 탭 바를 생성하고 각 탭에 대한 ViewController를 설정해야 합니다. UITabBarController를 사용하여 탭 바를 생성하고 탭에 대한 ViewController를 설정할 수 있습니다. 다음은 예시 코드입니다.

let tabBarController = UITabBarController()
let firstViewController = UIViewController()
let secondViewController = UIViewController()

tabBarController.viewControllers = [firstViewController, secondViewController]

Step 2: 애니메이션 추가하기

두 번째로, 탭을 선택했을 때 애니메이션을 추가해보겠습니다. UITabBarControllerDelegate를 사용하여 탭 바의 이벤트를 감지할 수 있습니다. 델리게이트 메서드 중 tabBarController(_:didSelect:)를 사용하여 탭 선택 이벤트를 처리합니다.

다음은 예시 코드입니다.

class ViewController: UIViewController, UITabBarControllerDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 탭 바의 델리게이트 설정
        self.tabBarController?.delegate = self
    }
    
    // 탭 선택 이벤트 처리
    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        // 선택한 탭의 인덱스 가져오기
        guard let selectedIndex = tabBarController.viewControllers?.firstIndex(of: viewController) else { return }
        
        // 애니메이션 적용
        let duration = 0.3
        UIView.animate(withDuration: duration, animations: {
            // 탭 바 아이콘 이동 애니메이션
            let tabBar = tabBarController.tabBar
            tabBar.subviews[selectedIndex].transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
            tabBar.subviews[selectedIndex].transform = .identity
        })
    }
}

위 코드에서는 탭을 선택했을 때 선택한 탭의 인덱스를 가져와 애니메이션을 적용하는 방식으로 구현하였습니다. CGAffineTransform을 사용하여 탭 바 아이콘의 크기를 변경하는 애니메이션을 적용하였습니다.

Step 3: 실행해보기

위의 코드를 실행해보면 탭을 선택했을 때 해당 탭의 아이콘이 약간 확대되는 애니메이션이 적용되는 것을 확인할 수 있습니다. 탭 바의 다른 요소들에도 애니메이션을 추가하거나 애니메이션의 종류를 변경하는 등의 작업을 더해보세요.

이렇게 Swift에서 애니메이션을 이용한 탭 바 모션 구현이 가능합니다. 앱의 사용자 경험을 개선하기 위해 다양한 애니메이션 효과를 탭 바에 적용해보세요.