matchedGeometryEffect 只是跳躍而不是動畫

Question

我正在嘗試使用matchedGeometryEffect將圖像從中心動畫到屏幕頂部。 然而，它只是跳躍。 這是我的觀點的簡化版本，這基本上是我想要做的：

struct MyView: View {
  @Namespace private var animation
  @State private var showSplash = true

  var body: some View {
    if showSplash {
      Image("SplashIcon")
        .matchedGeometryEffect(id: "icon", in: animation)
        .frame(maxWidth: .infinity)
        .task {
          try? await Task.sleep(nanoseconds: 1_500_000_000)
          withAnimation {
            showSplash.toggle()
          }
        }
    } else {
      VStack {
        Image("SplashIcon")
          .matchedGeometryEffect(id: "icon", in: animation)
          .frame(maxWidth: .infinity)
        Spacer()
      }
    }
  }

我該如何解決？

Answer 1

看評論...

實際上在預覽中也可以正常工作..如果將條件放入容器中總是更好，例如

  var body: some View {
        VStack {            // << this one !!
            if showSplash {
                Image("SplashIcon")
                    .matchedGeometryEffect(id: "icon", in: animation)
                    .frame(maxWidth: .infinity)
                    .task {
                        try? await Task.sleep(nanoseconds: 1_500_000_000)
                        withAnimation {
                            showSplash.toggle()
                        }
                    }
            } else {
                VStack {
                    Image("SplashIcon")
                        .matchedGeometryEffect(id: "icon", in: animation)
                        .frame(maxWidth: .infinity)
                    Spacer()
                }
            }
        }
    }