How to add and remove views with a transition

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-and-remove-views-with-a-transition]

 

How to add and remove views with a transition

 

일반적인 Swift 조건을 사용해서 디자인을 뷰에 포함하거나 제외할 수 있습니다. 예를들어, 다음은 버튼이 탭 될때 상세 텍스트를 추가하거나 제거합니다.

struct ContentView: View {
    @State private var showDetails = false

    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.showDetails.toggle()
                }
            }) {
                Text("Tap to show details")
            }

            if showDetails {
                Text("Details go here.")
            }
        }
    }
}

 

기본적으로, SwiftUI는 뷰를 삽입하거나 제거하는데 흐려지는(fade) 애니메이션을 사용하지만, 뷰에 transition() modifier를 붙여서 원하는데로 변경할 수 있습니다. 

 

예를들어, 다음과 같이 상세 텍스트 뷰를 하단에서 안쪽 또는 바깥쪽으로 미끄러질(slide) 수 있습니다.

Text("Details go here.")
    .transition(.move(edge: .bottom))

 

또한 뷰를 앞쪽에서 들어오는 애니메이션을 하고 끝쪽 모서리로 나가는 애니메이션하는 .slide 전환이 있습니다.

Text("Details go here.")
    .transition(.slide)

 

그리고 뷰가 들어올때 크기가 없다가 전체 사이즈로 확대되고, 나갈때 다시 크기가 없어지도록 축소할 수 있는 .scale 전환이 있습니다.

Text("Details go here.")
    .transition(.scale)