SwiftUI中withAnimation控制Bool值的overlay二次显示动画异常问题

这个问题出现在iOS16.4的SwiftUI环境中：通过条件渲染添加/移除overlay视图时，首次显示、隐藏动画正常，但第二次点击「Show」按钮时，overlay背景层会延迟2秒后直接出现，仅按钮的offset动画正常。原因是视图被完全移除后重新创建时，SwiftUI对背景层的动画触发逻辑出现异常。

解决方案1：保留视图实例，通过透明度与缩放控制显隐 #

避免直接移除视图，而是通过opacity、scaleEffect修饰符控制视图的显示状态，同时用allowsHitTesting确保隐藏时不响应点击。这样视图始终存在于视图树中，每次状态变化时动画都能正常触发。

修改后的完整代码：

struct Playground: View {
    
    @State private var showDetailView: Bool = false
    
    var body: some View {
        VStack {
            Button("Show") {
                withAnimation(.easeIn(duration: 2.0)) {
                    showDetailView = true
                }
            }.buttonStyle(.borderedProminent)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(
            show()
                .opacity(showDetailView ? 1 : 0)
                .scaleEffect(showDetailView ? 1 : 0.9)
                .allowsHitTesting(showDetailView)
        )
    }
    
    @ViewBuilder
    func show() -> some View {
        VStack {
            Button("Close") {
                withAnimation(.easeIn(duration: 2.0)) {
                    showDetailView = false
                }
            }.buttonStyle(.bordered)
                .offset(y: 100)
        }
        .foregroundColor(.white)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
        .background(.black)
    }
}

解决方案2：添加显式过渡动画 #

如果坚持使用条件渲染，可以给overlay视图添加显式的transition修饰符，强制SwiftUI在视图添加/移除时执行动画：

// 修改overlay部分代码
.overlay {
    if showDetailView {
        show()
            .transition(.opacity.combined(with: .scale))
    }
}

这种方式通过指定过渡动画，确保每次视图添加时都能触发完整的显示动画，解决第二次显示无动画的问题。

内容的提问来源于stack exchange，提问作者Gerry Gao