How to animate changes in binding values

 

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

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-animate-changes-in-binding-values]

 

How to animate changes in binding values

 

SwiftUI는 2가지 방법의 바인딩으로 프로그램의 상태를 조정할 수 있고, 뷰 계층구조를 조정해서 응답할 수 있습니다. 예를들어, 텍스트가 나타나거나 사라질수 있으며, 또는 뷰의 불투명도를 조정합니다.

 

상태 변경을 즉시 처리하기 보다는, 바인딩에 animation()를 추가해서 바인딩이 수정되는 변경사항으로 animate을 변경할 수 있습니다. 예를들어, 해당 뷰는 토글의 상태에 따라 텍스트 뷰를 보여주거나 숨기는 토글이 있습니다.

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

    var body: some View {
        VStack {
            Toggle(isOn: $showingWelcome) {
                Text("Toggle label")
            }

            if showingWelcome {
                Text("Hello World")
            }
        }
    }
}

 

애니메이션 없으면, 텍스트 뷰는 즉시 나타나거나 사라지며, 시각적으로 안 좋습니다. 토글을 수정함으로써 $showingWelcom.animation()에 바인딩하고 텍스트 뷰가 부드럽게 미끄러질 것입니다. 

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

    var body: some View {
        VStack {
            Toggle(isOn: $showingWelcome.animation()) {
                Text("Toggle label")
            }

            if showingWelcome {
                Text("Hello World")
            }
        }
    }
}

 

애니메이션을 보다 더 세밀하게 제어하려는 경우, 전환이 발생하는 방식에 영향을 주는 animation()에 매개변수를 전달 할 수 있습니다. 예를들어, 다음은 간단한 스프링 애니메이션으로 텍스트를 가져올 것입니다.

Toggle(isOn: $showingWelcome.animation(.spring())) {
    Text("Toggle label")
}