SwiftUI：无需额外@State变量实现视图属性变化动画？

你的现有实现方案是可行的，但在多属性场景下确实会因重复定义@State变量变得繁琐。下面提供两种无需为每个动画属性额外添加@State变量的实现方式：

方法一：利用onChange直接触发动画，移除中转@State变量 #

核心思路是：不再通过额外的@State变量中转属性值，直接监听传入属性的变化，在onChange中用withAnimation触发视图过渡动画，同时将视图的id绑定到传入的属性值（替代随机UUID，更精准）。

struct ParentView: View {
    @State private var text: String = "Hello, World!"
    
    var body: some View {
        AnimatedTextView(text: text)
        
        Button("Tap me") {
            text += " +1" // 无需withAnimation，动画由子视图自主控制
        }
    }
}

struct AnimatedTextView: View {
    let text: String
    
    var body: some View {
        Text(text)
            .transition(.asymmetric(
                insertion: .move(edge: .trailing).combined(with: .opacity),
                removal: .move(edge: .leading).combined(with: .opacity)
            ))
            .id(text) // 用text作为唯一标识，替代UUID()，更精准
            .onChange(of: text) { _ in
                // 子视图内部控制动画触发
                withAnimation { }
            }
    }
}

这个方案的关键在于：onChange中调用空的withAnimation块，会触发当前视图环境下的动画，结合id(text)的变化，让transition动画生效，无需额外的中转状态。

方法二：封装动画逻辑为自定义修饰符（多属性场景更友好） #

如果视图有多个需要自主控制动画的属性，可以把动画触发逻辑封装成自定义ViewModifier，避免重复代码：

// 自定义修饰符：监听指定属性变化，自动触发动画
struct AutoAnimateOnChange<Value: Equatable>: ViewModifier {
    let value: Value
    let animation: Animation
    
    func body(content: Content) -> some View {
        content
            .onChange(of: value) { _ in
                withAnimation(animation) { }
            }
    }
}

// 扩展View，方便调用
extension View {
    func autoAnimate<Value: Equatable>(on value: Value, animation: Animation = .default) -> some View {
        self.modifier(AutoAnimateOnChange(value: value, animation: animation))
    }
}

// 使用示例
struct AnimatedTextView: View {
    let text: String
    let color: Color // 新增需要动画的属性
    
    var body: some View {
        Text(text)
            .foregroundColor(color)
            .transition(.asymmetric(
                insertion: .move(edge: .trailing).combined(with: .opacity),
                removal: .move(edge: .leading).combined(with: .opacity)
            ))
            .id("\(text)-\(color)") // 组合多属性作为唯一标识
            .autoAnimate(on: text)
            .autoAnimate(on: color, animation: .easeInOut(duration: 0.5)) // 可为不同属性指定不同动画
    }
}

这个方案的优势在于：多属性场景下，只需给每个属性添加一行.autoAnimate(on: ...)即可，无需重复编写onChange和@State变量，代码更简洁可维护。

总结 #

你的初始方案是有效的，但上述两种方法可以避免冗余的@State变量：

• 单属性场景优先用方法一，代码最简洁；
• 多属性场景推荐用方法二，通过自定义修饰符封装动画逻辑，扩展性更强。

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