带有布尔标志的淡入/淡出动画

Question

我正在尝试在 SwiftUI 中使用淡入/淡出动画实现一个简单的“点击切换 UI 的可见性”。下面的代码按照我的预期设置了 Text 元素的淡入效果，但当isVisible变为 false 时，它​​会立即隐藏 Text 元素。

我想了解为什么这段代码不起作用，以及如何以最自然的方式修复它。

import SwiftUI

struct ContentView: View {
    @State var isVisible = true
    var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(.blue)
                .gesture(TapGesture(count: 1).onEnded {
                    withAnimation(.easeInOut(duration: 1.0)) {
                        isVisible.toggle()
                    }
                })
            if isVisible {
                Text("Tap me!")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我在 Big Sur 上使用 Xcode 12.5，我的 iPhone 运行的是 iOS 14.5.1。

Answer 1

感谢埃里克·菲利普斯（Erik Philips），这就是答案。

import SwiftUI

struct ContentView: View {
    @State var isVisible = true
    var body: some View {
        ZStack {
            Rectangle()
                .zIndex(1)
                .foregroundColor(.blue)
                .gesture(TapGesture(count: 1).onEnded {
                    withAnimation(.easeInOut(duration: 1.0)) {
                        isVisible.toggle()
                    }
                })
            if isVisible {
                Text("Tap me!")
                    .zIndex(2)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}