[swift] SwiftUI에서의 뷰 이동 애니메이션 적용하는 방법

14 Dec 2023

swift

SwiftUI는 iOS 앱을 구축하기 위한 강력한 도구로, 뛰어난 화면 및 애니메이션 구성 요소를 제공합니다. 사용자가 화면을 전환하거나 뷰를 이동하는 과정을 부드럽고 시각적으로 더욱 매력적으로 만들기 위해 애니메이션을 적용하는 것이 중요합니다. SwiftUI에서 뷰 이동 애니메이션을 적용하는 방법에 대해 알아보겠습니다.

1. NavigationLink 사용

NavigationLink는 SwiftUI에서 사용자가 탭하면 새로운 뷰로 이동할 수 있는 링크를 생성하는 데 사용됩니다. 이 링크에 애니메이션을 적용하여 뷰 이동 과정을 시각적으로 더욱 흥미롭게 만들 수 있습니다.

예시:

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: DetailView()) {
                Text("이동하기")
            }
        }
    }
}

2. 애니메이션 추가

SwiftUI는 애니메이션을 쉽게 적용할 수 있도록 여러 내장 애니메이션 효과를 제공합니다. 이를 활용하여 뷰 이동 과정을 가시적으로 만들 수 있습니다.

예시:

struct ContentView: View {
    @State private var isShowingDetail = false
    
    var body: some View {
        Button("이동하기") {
            withAnimation {
                isShowingDetail.toggle()
            }
        }
        .fullScreenCover(isPresented: $isShowingDetail, content: DetailView.init)
    }
}

3. 커스텀 애니메이션 적용

더욱 흥미로운 애니메이션 효과를 원한다면, SwiftUI에서 제공하는 withAnimation을 활용하여 사용자 정의 애니메이션을 추가할 수 있습니다.

예시:

struct ContentView: View {
    @State private var isShowingDetail = false
    
    var body: some View {
        Button("이동하기") {
            withAnimation(.spring()) {
                isShowingDetail.toggle()
            }
        }
        .sheet(isPresented: $isShowingDetail) {
            DetailView()
        }
    }
}

SwiftUI에서 뷰 이동 애니메이션을 적용하는 방법에 대해 알아보았습니다. 애니메이션을 사용하여 앱의 사용자 경험을 향상시키고 더욱 매력적인 앱을 구축할 수 있습니다.

참고 문헌: