SwiftUI并发动画异常：位置动画时按钮数量变化致动画错乱

我有一个视图，它的位置会根据应用其他状态切换到两个不同位置；同时该视图会根据异步网络请求返回的状态，显示2个或3个按钮。偶尔会出现位置动画执行过程中按钮数量发生变化的情况，此时按钮的动画会出现错乱（比如按钮错位、过渡动画异常）。

复现代码 #

struct ContentView: View {
  @State private var isShowing: Bool = false
  @State private var isUp: Bool = false
  
    var body: some View {
      ZStack {
        VStack(spacing: 20.0) {
          Spacer().frame(height: 60.0)
          Button(action: {
            withAnimation {
              isShowing.toggle()
            }
          }) {
            Text("Toggle item")
          }
          Button(action: {
            withAnimation(.spring(duration: 3.0)) {
              isUp.toggle()
            }
          }) {
            Text("Toggle position")
          }
          Spacer()
        }
        VStack {
          Spacer()
          otherView
            .padding()
          Spacer()
            .frame(height: isUp ? 200 : 20.0)
        }
      }
    }
  
  @ViewBuilder
  var otherView: some View {
    HStack {
      Spacer()
      Text("A")
      if isShowing {
        Text("B")
      }
      Text("C")
      Spacer()
    }
    .padding()
    .background {
      RoundedRectangle(cornerRadius: 20.0)
        .foregroundStyle(.red)
    }
  }
}

解决方案 #

1. 给动态视图添加唯一ID

SwiftUI靠视图身份识别处理动画，动态添加/移除的视图如果没有明确ID，容易被错误复用导致动画错乱。修改otherView中动态显示的按钮：

@ViewBuilder
var otherView: some View {
  HStack {
    Spacer()
    Text("A")
    if isShowing {
      Text("B")
        .id("button-b") // 给按钮B添加唯一标识
    }
    Text("C")
    Spacer()
  }
  .padding()
  .background {
    RoundedRectangle(cornerRadius: 20.0)
      .foregroundStyle(.red)
  }
}

2. 分离动画作用域

把位置动画和内容动画的作用域分开，避免状态冲突。给位置变化的视图单独绑定动画，而非用全局withAnimation包裹状态切换：

// 修改位置切换按钮的动作，去掉内部的withAnimation
Button(action: {
  isUp.toggle()
}) {
  Text("Toggle position")
}

// 给位置相关的视图单独绑定动画
VStack {
  Spacer()
  otherView
    .padding()
  Spacer()
    .frame(height: isUp ? 200 : 20.0)
    .animation(.spring(duration: 3.0), value: isUp) // 动画仅响应isUp状态变化
}

内容切换的按钮保持原有逻辑即可，确保动画只作用于内容状态：

Button(action: {
  withAnimation {
    isShowing.toggle()
  }
}) {
  Text("Toggle item")
}

3. 用matchedGeometryEffect做精细动画控制（可选）

如果需要更自然的过渡效果，可以用matchedGeometryEffect关联视图的位置和内容变化：

struct ContentView: View {
  @State private var isShowing: Bool = false
  @State private var isUp: Bool = false
  @Namespace private var animationNamespace // 定义命名空间
  
    var body: some View {
      ZStack {
        VStack(spacing: 20.0) {
          Spacer().frame(height: 60.0)
          Button(action: {
            withAnimation {
              isShowing.toggle()
            }
          }) {
            Text("Toggle item")
          }
          Button(action: {
            isUp.toggle()
          }) {
            Text("Toggle position")
          }
          Spacer()
        }
        VStack {
          Spacer()
          otherView
            .padding()
            .matchedGeometryEffect(id: "bottom-container", in: animationNamespace)
          Spacer()
            .frame(height: isUp ? 200 : 20.0)
        }
        .animation(.spring(duration: 3.0), value: isUp)
      }
    }
  
  @ViewBuilder
  var otherView: some View {
    HStack {
      Spacer()
      Text("A")
      if isShowing {
        Text("B")
          .id("button-b")
      }
      Text("C")
      Spacer()
    }
    .padding()
    .background {
      RoundedRectangle(cornerRadius: 20.0)
        .foregroundStyle(.red)
        .matchedGeometryEffect(id: "bottom-background", in: animationNamespace)
    }
  }
}

原理 #

SwiftUI的动画系统依赖视图的身份跟踪变化，当动态视图和位置动画同时触发时，没有明确标识的视图会被系统误判，导致动画错乱。通过添加ID、分离动画作用域或使用matchedGeometryEffect，能让系统正确识别每个视图的变化，保证动画流畅执行。

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