过渡动画在SwiftUI中不起作用

108

超级咖啡：

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

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

插入时从不透明过渡到不透明，移除时从不透明过渡到透明。

消息应该在showMessagestate属性为true 时淡入，在state属性为false时淡出。就我而言，这是不正确的。该消息以淡入淡出的动画显示，但它完全没有动画隐藏。有任何想法吗？

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

斯科特·格里本（Scott Gribben）：

问题是，当视图在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)
        }
    }
}

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。