SwiftUI中如何为TextField触发的State变更添加动画？

嘿，这个场景我之前开发时也遇到过——TextField自动更新@State变量时，不会主动触发withAnimation，导致关联视图的变化没动画效果。别担心，有几个实用的方案能解决这个问题：

方案1：用onChange监听State变化触发动画 #

我们可以利用onChange修饰符监听text变量的变化，每次变化时手动调用withAnimation，这样关联视图的显示/隐藏就会带上动画：

struct Foo: View {
    @State private var text = ""
    
    var body: some View {
        VStack {
            TextField("Foo", text: $text) {
                print("editing ended")
            }
            
            if !text.isEmpty {
                Button(action: {}) {
                    Text("Done")
                }
                .transition(.opacity) // 给按钮加过渡效果，让动画更自然
            }
        }
        .onChange(of: text) { _ in
            withAnimation(.easeInOut) {}
        }
    }
}

这个方法简单直接，不需要修改TextField的绑定逻辑，只需要在外部监听变量变化触发动画即可。

方案2：自定义带动画的Binding #

更优雅的方式是封装一个自定义Binding，把withAnimation逻辑放到setter里，这样每次TextField更新值时，都会自动触发动画：

struct Foo: View {
    @State private var text = ""
    
    // 封装带动画的Binding
    private var animatedTextBinding: Binding<String> {
        Binding(
            get: { self.text },
            set: { newValue in
                withAnimation(.spring()) {
                    self.text = newValue
                }
            }
        )
    }
    
    var body: some View {
        VStack {
            // 使用自定义的Binding
            TextField("Foo", text: animatedTextBinding) {
                print("editing ended")
            }
            
            if !text.isEmpty {
                Button(action: {}) {
                    Text("Done")
                }
                .transition(.scale)
            }
        }
    }
}

这个方案把动画逻辑和数据绑定封装在一起，代码复用性更好，后续其他地方需要类似效果也能直接用这个Binding。

方案3：给视图层级添加全局动画 #

如果希望所有依赖text变量的视图变化都应用动画，可以直接给父视图加上animation修饰符，绑定text作为动画触发值：

struct Foo: View {
    @State private var text = ""
    
    var body: some View {
        VStack {
            TextField("Foo", text: $text) {
                print("editing ended")
            }
            
            if !text.isEmpty {
                Button(action: {}) {
                    Text("Done")
                }
                .transition(.slide)
            }
        }
        // 当text变化时，应用指定动画
        .animation(.easeInOut(duration: 0.3), value: text)
    }
}

注意：这个方式会让所有依赖text的视图变化都带上动画，如果只想给特定视图（比如Done按钮）加动画，前两个方案会更精准。

小提示 #

记得给需要动画的视图加上transition修饰符，比如.opacity、.slide、.scale等，能让动画效果更流畅自然，避免生硬的显示/隐藏。

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