使用布尔标志淡入/淡出动画

Question

我正在尝试实现一个简单的"点击以切换UI的可见性"；在SwiftUI中使用淡入/淡出动画。下面的代码如我所期望的那样为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()
}
}