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

问题描述

我正在尝试使用淡入/淡出动画在 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。

解决方法

感谢 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()
    }
}