ios - 过渡动画在 SwiftUI 中不起作用

Question

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

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)动画的文档

A transition from transparent to opaque on insertion, and from opaque to transparent on removal.

当 showMessage 状态属性变为 true 时消息应该淡入，当它变为 false 时淡出。就我而言，情况并非如此。该消息以淡入淡出动画显示，但隐藏时根本没有动画。有什么想法吗？

编辑:请参阅下面从模拟器中获取的 gif 中的结果。

Answer 1

问题是当 View 在 ZStack 中来来去去时，它们的“zIndex”不会保持不变。发生的事情是，当“showMessage”从 true 变为 false 时，带有“Hello World”文本的 VStack 被放在堆栈的底部，黄色立即被绘制在它的顶部。它实际上正在淡出，但它是在黄色后面淡出的，所以您看不到它。

要修复它，您需要为堆栈中的每个 View 明确指定“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)
            }
        }
    }
}