SwiftUI ScrollView内repeatForever动画触发非预期位移动画问题

问题现象 #

在SwiftUI开发时遇到异常动画行为，已通过Demo复现：
需求是让CursorView常驻颜色渐变动画，因此在onAppear回调中把动画状态设为true启动动画。初始场景下动画运行正常，但点击CursorView触发上方Text视图隐藏的逻辑时，CursorView会额外出现位移动画，和预期不符——预期仅CursorView执行颜色变化动画，不应存在位置动画。

已验证信息 #

• 如果用@State var animation替代ViewModel里的@Published var animation驱动动画，所有表现均符合预期，但不清楚该现象的原理
• 需要了解其他可行解决方案，以及上述方案生效的根本原因

复现代码 #

父视图实现：

struct UnexpectedView: View {
    @State var activeIndex = 0
    var body: some View {
        VStack(spacing: 0) {
            ScrollView {
                ZStack(alignment: .top) {
                    VStack(spacing: 0) {
                        if activeIndex == 0 {
                            Text("subtitle")
                                .padding(.bottom, 40)
                        }
                        CursorView()
                            .onTapGesture {
                                activeIndex = 1
                            }
                        Spacer()
                    }
                }
            }
        }
    }
}

ViewModel与CursorView实现：

class UnexpectedViewModel: ObservableObject {
    @Published var animation = false
}

struct CursorView: View {
    @State var animation = false
    @ObservedObject var viewModel = UnexpectedViewModel()
    var body: some View {
        VStack {
            Rectangle()
                .frame(height: 2)
                .foregroundColor(
                    viewModel.animation ? .black : .gray
                )
                .animation(.easeInOut(duration: 1)
                    .repeatForever(autoreverses: false), value: viewModel.animation)
                .onAppear {
                    viewModel.animation.toggle()
                }
        }
    }
}

根本原因 #

问题核心是SwiftUI的动画事务传递机制，以及@State和@ObservedObject的状态更新链路差异：

• 点击CursorView修改父视图activeIndex时，Text被移除会触发布局变化，SwiftUI会自动为这次视图层级变化生成隐式动画事务，沿着视图树向下传递给所有子视图。
• 当动画依赖@ObservedObject的@Published属性时，ObservableObject的objectWillChange触发是在父视图更新的事务链路上，会把当前传递的隐式布局动画和自定义的颜色动画合并，最终导致位置变化也被套上了重复动画效果。
• @State是视图的私有状态，它的更新触发的动画事务完全独立，不会和父视图传递下来的布局隐式动画合并，只会作用于显式指定的颜色变化属性，不会影响布局位置的变化，因此表现符合预期。

可行解决方案 #

除了直接使用@State驱动动画外，还有两种常用方案可以解决该问题：

• 隔离动画事务
  可以在父视图触发activeIndex更新时显式禁用隐式动画，避免动画事务向下传递：

  .onTapGesture {
      withAnimation(nil) {
          activeIndex = 1
      }
  }
  

  也可以在CursorView的动画修饰符后加事务判断，过滤掉非自身触发的动画：

  .transaction { t in
      guard t.animation != nil else { return }
      // 非自身颜色动画触发的事务，直接清空动画
      if viewModel.animation == false {
          t.animation = nil
      }
  }
  

• 拆分动画视图
  把做颜色动画的Rectangle抽成独立子视图，内部用@State自驱动动画，父视图布局变化时不会影响独立子视图内部的动画事务，从根源上避免动画合并问题。

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