ZStack 中的矩形更改 SwiftUI animation

Question

我正在尝试使用 SwiftUI 在两个状态之间转换。

我已将其简化为一个简单的示例

struct Test2View: View {

    @State var isLoading: Bool = true

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 10)
                .fill(Color. secondary)
                .shadow(radius: 4, x: 2, y: 5)
                .frame(width: 300, height: 150, alignment: .center)

            if isLoading {
                Text("Loading")
                .transition(.moveAndFade())
            } else {
                Text("Content")
                .transition(.moveAndFade())
            }
        }.onTapGesture {
            withAnimation {
                self.isLoading.toggle()
            }
        }
    }

}

extension AnyTransition {
    static func moveAndFade(delay: TimeInterval = 0) -> AnyTransition {
        let insertion = AnyTransition.offset(x: 0, y: 15)
            .combined(with: .opacity)
        let removal = AnyTransition.offset(x: 20, y: 20)
            .combined(with: .opacity)
        return .asymmetric(insertion: insertion, removal: removal)
    }
}

在没有 RoundedRectangle 的情况下，这按我预期的方式工作：

但是，一旦我添加了 RoundRectangle，我就失去了删除 animation（除非我中断 animation，那么你可以看到我期待的 animation）：

知道为什么 RoundedRectangle 会与 animation 混淆吗？ 我什至尝试添加.transition(.identity)没有任何成功。

Answer 1

我无法说出 animation 发生变化的确切原因，但我找到了原因。 这与框架的大小有关。

您的Test2View视图主体版本：

ZStack {
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.white)
        .shadow(radius: 4, x: 2, y: 5)
        .frame(width: 300, height: 150, alignment: .center)

    if isLoading {
        Text("Loading")
        .transition(.moveAndFade())
    } else {
        Text("Content")
        .transition(.moveAndFade())
    }
}
.border(Color.red)
.onTapGesture {
    withAnimation {
        self.isLoading.toggle()
    }
}

固定版本：

ZStack {
    if isLoading {
        Text("Loading")
        .transition(.moveAndFade())
    } else {
        Text("Content")
        .transition(.moveAndFade())
    }
}
.background(
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.white)
        .shadow(radius: 4, x: 2, y: 5)
        .frame(width: 300, height: 150, alignment: .center)
)
.border(Color.green)
.onTapGesture {
    withAnimation {
        self.isLoading.toggle()
    }
}

基本上，我使用.background而不是创建VStack 。

比较图片：

^{边框颜色只是为了指示帧大小。 你可以去掉这个！}