SwiftUI中如何通过隐式动画实现属性的选择性动画？

问题背景 #

原显式动画示例可实现矩形尺寸动画变化、颜色无动画切换：

struct ContentView: View {
    
    @State var size: CGFloat = 200
    @State var color = Color.red
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(color)
                .frame(width: size, height: size)
            
            Button("Toggle") {
                withAnimation {
                    self.size = self.size == 200 ? 300 : 200
                }
                self.color = self.color == .red ? .blue : .red
            }
        }
    }
}

需求：通过单个状态属性，使用隐式动画（.animation修饰符）实现相同效果，无需在状态变更处手动包裹动画。但尝试以下方案均未达预期：

• 方案1：保留双状态属性，使用.animation(.linear, value: self.size)时，iOS17.4下尺寸和颜色变化都被动画了；
• 方案2：使用单个状态属性，添加两个.animation修饰符，完全无动画；
• 方案3：使用iOS17新增的闭包式.animation，同样无动画。

需要明确上述现象的原因，以及iOS16及以上的可行实现方式。

方案失败原因分析 #

方案1失败原因 #

SwiftUI的隐式动画默认会作用于所有受状态变化影响的视图属性，只要该视图或其父视图添加了.animation修饰符。当你给视图添加.animation(.linear, value: size)时，虽然指定了触发动画的value是size，但在同一个状态更新周期内，color也发生了变化——SwiftUI会把这次状态变更（同时修改size和color）视为同一个更新事务，因此所有受影响的属性（尺寸、颜色）都会应用动画，导致颜色也被动画了。

方案2、3失败原因 #

如果用单个状态属性（比如一个包含size和color的结构体），但错误地添加多个.animation修饰符，或者闭包式动画的逻辑不对，会导致动画被覆盖或无法正确触发：

• 多个.animation修饰符会遵循就近原则，后面的动画会覆盖前面的，若最后一个动画未正确关联状态变化，就会无动画；
• iOS17的闭包式.animation如果没有正确返回对应状态的动画配置，或者没有指定触发的value，也会导致动画不生效。

iOS16及以上的实现方案 #

我们可以通过单个状态属性+精准的动画作用范围来实现需求：

步骤1：定义单个状态结构体 #

把size和color封装到一个结构体中，作为单个状态属性：

struct ViewState: Equatable {
    var size: CGFloat = 200
    var color: Color = .red
}

方案一：拆分视图层级实现精准动画 #

核心思路是：只给尺寸相关的视图部分添加隐式动画，颜色部分不应用动画。通过拆分视图层级，让动画只作用于尺寸变化的部分：

struct ContentView: View {
    @State private var state = ViewState()
    
    var body: some View {
        VStack {
            // 颜色填充部分不应用动画，尺寸变化部分单独加动画
            Color(state.color)
                .overlay(
                    Rectangle()
                        .fill(Color.clear)
                        .frame(width: state.size, height: state.size)
                )
                .animation(.linear, value: state.size) // 仅当size变化时触发动画
            
            Button("Toggle") {
                // 直接修改状态，无需手动包裹withAnimation
                state.size = state.size == 200 ? 300 : 200
                state.color = state.color == .red ? .blue : .red
            }
        }
    }
}

方案二：使用.transaction精准控制动画（更简洁） #

也可以通过.transaction修饰符直接控制动画是否生效，无需拆分视图：

struct ContentView: View {
    @State private var state = ViewState()
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(state.color)
                .frame(width: state.size, height: state.size)
                // 仅对size变化应用动画，color变化跳过动画
                .transaction { tx in
                    if state.size != tx.oldValue(for: \.state.size) {
                        tx.animation = .linear
                    } else {
                        tx.animation = nil
                    }
                }
            
            Button("Toggle") {
                state.size = state.size == 200 ? 300 : 200
                state.color = state.color == .red ? .blue : .red
            }
        }
    }
}

关键原理总结 #

• 隐式动画的作用范围是视图树中添加了.animation修饰符的节点及其子节点，所有受状态变化影响的属性都会被动画；
• 要实现部分属性动画、部分无动画，需要要么拆分视图层级，让动画只作用于目标属性对应的视图部分；要么用.transaction精准控制动画是否生效；
• 单个状态属性的好处是避免多状态同步问题，同时符合隐式动画的使用逻辑——状态变化自动触发动画，无需手动调用withAnimation。

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