SwiftUI：NavigationView 内的动画

Question

我正在尝试在 SwiftUI 中创建一个简单的动画。它基本上是一个改变其框架的矩形，同时保持在父视图的中心。

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Text")
                ZStack {
                    Color.blue
                    SquareAnimation().frame(width: 200, height: 200, alignment: .center)
                }
                Text("Text")
            }
        }
    }
}

struct SquareAnimation: View {
    var currentRect = CGRect(x: 0, y: 0, width: 50, height: 50)
    var finalRect = CGRect(x: 0, y: 0, width: 100, height: 100)
    
    private let animation = Animation.easeInOut(duration: 1).repeatForever(autoreverses: true)
    
    @State var animate = false
    
    var body: some View {
        ZStack() {
            Color.clear
            Rectangle()
                .frame(width: animate ? finalRect.width: currentRect.width, height: animate ? finalRect.height: currentRect.height, alignment: .center)
                .animation(animation, value: animate)
                .onAppear() {
                    animate = true
                }
        }
        
    }
} 

问题是，如果使用NavigationView，黑色矩形不会留在中心。
我也使用了显式动画但无济于事。为什么NavigationView 会影响矩形动画？ 谢谢！

Answer 1

在 NavigationView 中视图框架为零时，onAppear 被调用得太早，因此应用动画从零变为值。

这是有效的解决方法。使用 Xcode 12.4 / iOS 14.4 测试

var body: some View {
    ZStack() {
        Color.clear
        Rectangle()
            .frame(width: animate ? finalRect.width: currentRect.width, height: animate ? finalRect.height: currentRect.height, alignment: .center)
            .animation(animation, value: animate)
            .onAppear {
                DispatchQueue.main.async {   
                   // << postpone till end of views construction !!
                    animate = true
                }
            }
    }
}

注意：几乎所有为什么问题都只能由 Apple 来回答...也许这是一个错误，也许是一个实现细节。