How to create an explicit animation

 

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

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-an-explicit-animation]

 

How to create an explicit animation

 

뷰에 애니메이션 modifier를 붙이는 경우, 암시적인 애니메이션으로 끝납니다 - 정수를 증가시키거나 Boolean을 토글시킴으로써, 뷰에서 다른 상태를 변경하면 애니메이션 할 수 있습니다.

 

대안으로는 명시적인(explicit) 애니메이션을 사용하는 것이며, 뷰에 modifiers를 붙이지 않고 대신 정확한 변경사항을 애니메이션하도록 SwiftUI에 요청합니다. 이를 위해서, withAnimation()을 호출해서 변경사항을 감싸줍니다(wrap).

 

예를들어, 다음은 탭 할때 마다 버튼이 약간 더 희미해지도록 명시적인 애니메이션을 사용합니다.

struct ContentView: View {
    @State private var opacity = 1.0

    var body: some View {
        Button(action: {
            withAnimation {
                self.opacity -= 0.2
            }
        }) {
            Text("Tap here")
                .padding()
                .opacity(opacity)
        }
    }
}

 

withAnimation()은 원하는 애니메이션 종류를 지정하는 매개변수를 가지므로, 다음과 같이 3초짜리 linear 애니메이션을 만들 수 있습니다.

withAnimation(.linear(duration: 3)) {
    self.opacity -= 0.2
}

 

명시적인 애니메이션은 영향 받는 모든 뷰를 애니메이션하기 때문에, 종종 유용하고, 암시적인 애니메이션을 붙이는 경우에는 아닙니다. 예를들어, 애니메이션의 일부분으로, 뷰 A가 뷰 B에 대한 공간을 만들어어야 하지만, 뷰 B에만 애니메이션이 붙어있고, 명시적인 애니메이션을 사용하지 않는 한 뷰 A는 애니메이션 없이 새로운 위치로 이동합니다.