无法在 SwiftUI Xcode 13.1 中为视图设置动画

Question

我现在有点难住了，因为我终其一生都无法弄清楚为什么我的视图没有在视图中进出动画。

我目前使用的是 Xcode 13.1 和 SwiftUI 3.0。 当我们将 state 属性设置为 true 时，我目前正在尝试为从底部向上滑动的视图设置动画，当此属性设置为 false 时，视图将向下滑动并从视图中删除。

没什么疯狂的，对我来说似乎很简单/直截了当，但是由于某种原因，当我更改状态属性时，我根本没有动画，这很奇怪。

我觉得 WindowGroup 可能是问题所在，但我无法弄清楚为什么这会影响动画。

下面是我目前正在使用的代码，但与显示我目前正在获得的行为的 gif 相比，它无法正常工作。

import SwiftUI

@main
struct MainApp: App {
    
    @State private var showCard = false
    
    var body: some Scene {
        WindowGroup {
                TabView {
                    Button("Show Card") {
                        withAnimation(.easeInOut(duration: 1)) {
                            showCard.toggle()
                        }
                    }
                    .tabItem {
                        Image.docViewFinder
                        Text("scan",
                             tableName: LocalisationTable.misc)
                    }
                    Text("Breakdowns")
                        .tabItem {
                            Image.stack
                            Text("breakdowns",
                                 tableName: LocalisationTable.misc)
                        }
                    Text("Home")
                        .tabItem {
                            Image.people
                            Text("people",
                                 tableName: LocalisationTable.misc)
                        }
                    Text("Home")
                        .tabItem {
                            Image.gear
                            Text("settings",
                                 tableName: LocalisationTable.misc)
                        }
                }
                .accentColor(.blue)
                .overlay(alignment: .bottom) {
                    if showCard {
                        Rectangle()
                            .edgesIgnoringSafeArea(.all)
                            .transition(.move(edge: .bottom))
                            .animation(.linear(duration: 1), value: showCard)
                            .frame(maxWidth: .infinity,
                                   maxHeight: 250)
                   }
                }
        }
    }
}

Answer 1

删除 if 并使用偏移量

.overlay(alignment: .bottom) {

   Rectangle()
      .edgesIgnoringSafeArea(.all)
      .transition(.move(edge: .bottom))
      .animation(.linear(duration: 1), value: showCard)
      .frame(maxWidth: .infinity,
           maxHeight: 250)
      .offset(x: 0, y: showCard ? 250:0) //This
}