SwiftUI中如何用withAnimation和.delay实现视图显隐链式动画？

问题根源 #

你遇到的问题主要来自两个关键点：

1. 状态变更被合并：在按钮点击的同步代码块里连续修改showSuccessful，SwiftUI会合并同一事件循环内的状态变更，最终showSuccessful仍保持false，导致提示完全不显示。
2. Form的默认动画覆盖：Form组件自带系统默认动画配置，会直接覆盖你通过withAnimation设置的时长，所以你设置的2秒动画会变成默认的1秒。

正确实现方式 #

方法1：异步延迟触发隐藏动画 #

通过DispatchQueue.main.asyncAfter延迟修改状态，避免同步块内的状态合并，同时给提示文本显式指定动画参数，覆盖Form的默认设置：

struct ContentView: View {
    @State var showSuccessful: Bool = false
    
    var body: some View {
        NavigationView {
            Form {
                if showSuccessful {
                    Text("Action finished successfully")
                        .transition(.opacity)
                        .animation(.easeIn(duration: 2.0), value: showSuccessful)
                }
                
                Button {
                    // 触发2秒淡入动画
                    withAnimation(.easeIn(duration: 2.0)) {
                        showSuccessful = true
                    }
                    
                    // 延迟4秒后触发2秒淡出动画
                    DispatchQueue.main.asyncAfter(deadline: .now() + 4) {
                        withAnimation(.easeIn(duration: 2.0)) {
                            showSuccessful = false
                        }
                    }
                } label: {
                    Text("Do Something")
                }
            }
        }
    }
}

方法2：用opacity绑定状态控制动画 #

直接通过opacity属性绑定状态，配合显式的动画修饰符，更直观地控制淡入淡出的时序和时长：

struct ContentView: View {
    @State var showSuccessful: Bool = false
    
    var body: some View {
        NavigationView {
            Form {
                Text("Action finished successfully")
                    .opacity(showSuccessful ? 1 : 0)
                    .animation(
                        showSuccessful ? 
                        .easeIn(duration: 2.0) : 
                        .easeIn(duration: 2.0).delay(4.0), 
                        value: showSuccessful
                    )
                
                Button {
                    showSuccessful = true
                    
                    DispatchQueue.main.asyncAfter(deadline: .now() + 4) {
                        showSuccessful = false
                    }
                } label: {
                    Text("Do Something")
                }
            }
        }
    }
}

核心注意事项 #

• 禁止在同一个同步代码块内连续修改同一@State变量，否则SwiftUI会合并状态变更，直接导致动画失效。
• 对于Form、List这类容器组件，必须给目标子视图显式添加.animation修饰符，指定自定义动画参数，才能覆盖容器的默认动画配置。
• .delay需要配合异步状态变更使用，确保前一个动画已经开始或完成后，再触发下一个状态变化。

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