SwiftUI开发：如何防止父视图动画覆盖子视图的独立动画？

当前代码里，点击「Show Rect」按钮显示矩形时，文本的50秒线性偏移动画会被按钮触发的.smooth(duration: 0.25)动画打断，没法继续执行。要让文本动画不受干扰、完整跑完50秒的偏移效果，可以按以下方式修改：

核心解决思路 #

通过animation(_:value:)给文本的动画绑定特定状态变量，明确指定动画仅响应该变量的变化，让SwiftUI区分开父视图和子视图的动画作用域。

修改后的完整代码 #

struct ContentView: View {
    @State private var showingRect = false
    var body: some View {
        VStack {
            Button("Show Rect") {
                withAnimation(.smooth(duration: 0.25)) {
                    showingRect.toggle()
                }
            }
            
            TextView()
            
            if showingRect {
                Rectangle()
                    .foregroundStyle(.blue)
                    .frame(width: 100, height: 100)
            }
            
        }
        .padding()
    }
}

struct TextView: View {
    @State private var animate = false
    
    var body: some View {
        Text("This is a very long text. Yeah, it is very very long.")
            .lineLimit(1)
            .offset(x: animate ? -300 : 0)
            // 仅当animate变量变化时，应用50秒的线性动画
            .animation(.linear(duration: 50), value: animate)
            .onAppear {
                animate = true
            }
    }
}

原理说明 #

SwiftUI中，父视图的withAnimation会默认给所有子视图的状态变化套上该动画。而animation(_:value:)可以精准限定：只有当绑定的value（这里是animate）发生变化时，才应用对应的动画。这样父视图的动画只会作用于showingRect相关的矩形显示/隐藏，不会干扰文本的偏移动画，让它能完整执行50秒的线性移动。

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