无法使用withAnimation时，如何实现视图的淡入淡出动画？

核心思路 #

直接通过if条件添加/移除视图会导致动画失效，且数组多源修改时无法统一包裹withAnimation。我们可以让按钮组始终存在于视图层级中，通过**透明度（opacity）和高度（frame height）**的变化实现视觉上的显隐，同时绑定动画到有效元素数量的状态值，自动触发过渡效果。

实现步骤与代码示例 #

1. 维护有效元素数量的状态变量：
   单独保存有效元素的计数，避免每次计算数组带来的状态变化检测问题，确保动画能准确触发。

2. 用动画修饰符绑定状态变化：
   给按钮组容器添加animation修饰符，绑定到有效计数变量，当计数变化时自动执行淡入淡出动画。

完整代码示例：

struct YourView: View {
    // 假设这是你的数据源数组
    @State private var dataArray: [YourItemType] = []
    // 保存有效元素的数量
    @State private var validItemCount = 0
    
    // 每次数组修改后更新有效计数
    private func refreshValidCount() {
        validItemCount = dataArray.filter { $0.name.isValid }.count
    }
    
    var body: some View {
        VStack {
            // 这里是修改数组的表单组件，示例如下
            TextField("添加元素", text: .init(get: { "" }, set: { newName in
                let newItem = YourItemType(name: newName)
                dataArray.append(newItem)
                refreshValidCount()
            }))
            .padding()
            
            // 按钮组容器，通过透明度和高度控制显隐
            VStack(spacing: 8) {
                Button1()
                Button2()
                Button3()
            }
            // 有效元素>0时完全显示，否则透明
            .opacity(validItemCount > 0 ? 1 : 0)
            // 有效元素>0时自适应高度，否则高度为0不占空间
            .frame(height: validItemCount > 0 ? nil : 0)
            // 绑定动画到有效计数，变化时触发淡入淡出
            .animation(.easeInOut(duration: 0.3), value: validItemCount)
            .clipped() // 防止内容溢出
        }
        .onAppear(perform: refreshValidCount)
        // 如果数组从外部修改（比如ViewModel），可以用onChange监听
        .onChange(of: dataArray) { _ in
            refreshValidCount()
        }
    }
}

// 假设的元素类型示例
struct YourItemType {
    let name: String
    var isValid: Bool {
        !name.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
    }
}

备选方案：使用Transition过渡 #

如果你更倾向于通过视图添加/移除实现动画，可以结合transition和绑定到状态的animation修饰符，无需手动包裹withAnimation：

struct YourView: View {
    @State private var dataArray: [YourItemType] = []
    @State private var validItemCount = 0
    
    private func refreshValidCount() {
        validItemCount = dataArray.filter { $0.name.isValid }.count
    }
    
    var body: some View {
        VStack {
            // 表单组件...
            
            if validItemCount > 0 {
                VStack(spacing: 8) {
                    Button1()
                    Button2()
                    Button3()
                }
                // 设置淡入淡出+缩放的过渡效果
                .transition(.opacity.combined(with: .scale))
                // 绑定动画到有效计数
                .animation(.easeInOut(duration: 0.3), value: validItemCount)
            }
        }
        .onAppear(perform: refreshValidCount)
        .onChange(of: dataArray, perform: { _ in refreshValidCount() })
    }
}

注意事项 #

• 确保validItemCount在数组每次修改后都被更新，包括外部ViewModel触发的数组变化，可以用onChange监听数组的变化。
• 第一种方案（保持视图存在）更适合频繁修改的场景，避免视图反复添加/移除带来的性能损耗；第二种方案更符合SwiftUI的视图生命周期逻辑，适合显隐频率较低的场景。

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