为什么 NavigationView 中的动画从左上角开始？

Question

我正在尝试在 SwiftUI 中创建一个简单的动画，我希望动画从中心顶部开始并结束到屏幕中心。
但是，正如您在视频中看到的，当我使用 NavigationView 时，动画从左上角开始：

这是我在此示例中使用的代码：

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        NavigationView {
            HStack {
                Text("Hello, world!")
                    .padding()
                    .background(Color.blue)
                    .offset(x: 0, y: show ? 0 : -30)
                    .animation(Animation.easeOut.delay(0.6))
                    .onAppear {
                            self.show = true
                    }
                    .navigationTitle("Why?")
            }
        }
    }
}

Answer 1

为什么 NavigationView 中的动画从左上角开始？

因为隐式动画会影响所有可设置动画的属性，包括位置，在创建时是CGPoint.zero（即左上角）。

这种情况是通过将动画链接到依赖状态值来解决的，因此它仅在状态改变时激活，因此所有动画属性不受影响。

这是您的情况的可能变体。使用 Xcode 12.1 / iOS 14.1 测试。

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        GeometryReader { gp in
            NavigationView {
                    HStack {
                         Text("Hello, world!")
                              .padding()
                              .background(Color.blue)
                              .offset(x: 0, y: show ? 0 : -gp.size.height / 2)
                              .animation(Animation.easeOut.delay(0.6), value: show)
                              .onAppear {
                                         self.show = true
                              }
                              .navigationTitle("Why?")
                    }
            }
        }
    }
}