过渡动画在 SwiftUI 中不起作用

发布于10月23日

我试图创建一个非常简单的过渡动画，通过点击按钮在屏幕中央显示/隐藏一条消息:

struct ContentView: View {
    @State private var showMessage = false

    var body: some View {
        ZStack {
            Color.yellow

            VStack {
                Spacer()
                Button(action: {
                    withAnimation(.easeOut(duration: 3)) {
                        self.showMessage.toggle()
                    }
                }) {
                    Text("SHOW MESSAGE")
                }
            }

            if showMessage {
                Text("HELLO WORLD!")
                    .transition(.opacity)
            }
        }
    }
}

根据.transition(.opacity)动画的文档

插入时从透明到不透明的过渡，以及从不透明到透明的过渡

当showMessage state属性变为true时，消息应淡入，当变为false时，消息应淡出.我的情况并非如此.该消息显示为淡入淡出动画，但隐藏时完全没有动画.有什么 idea 吗？

EDIT:在下面取自模拟器的gif中查看结果.

推荐答案

问题是，当视图在ZStack中出现和消失时，它们的"zIndex"不会保持不变.所发生的事情是，当"showMessage"从true变为false时，带有"Hello World"文本的VStack被放在堆栈的底部，黄色立即被绘制在堆栈的顶部.它实际上正在淡出，但它在黄色后面淡出，所以你看不见它.

要解决此问题，需要为堆栈中的每个视图显式指定"zIndex"，以便它们始终保持不变，如下所示:

struct ContentView: View {
@State private var showMessage = false

var body: some View {
    ZStack {
        Color.yellow.zIndex(0)

        VStack {
            Spacer()
            Button(action: {
                withAnimation(.easeOut(duration: 3)) {
                    self.showMessage.toggle()
                }
            }) {
                Text("SHOW MESSAGE")
            }
        }.zIndex(1)

        if showMessage {
            Text("HELLO WORLD!")
                .transition(.opacity)
                .zIndex(2)
        }
    }
}

}