SwiftUI中对象多动画叠加互相干扰的问题求助

你遇到的核心问题是：SwiftUI中给同一视图多次添加.animation修饰符时，后续的动画配置会覆盖之前的。当触发任意绑定属性的变化时，所有属性都会使用最后一次设置的动画参数，这就导致原本的高度循环动画被宽度的弹簧动画替换了。

解决方案：用withAnimation为单个属性指定独立动画 #

放弃在视图上绑定.animation，转而在修改属性时，用withAnimation包裹动作，让每个属性的动画完全独立。

修改后的完整代码：

import SwiftUI

struct RectangleView: Shape {
    var height: CGFloat
    var width: CGFloat
    
    var animatableData: AnimatablePair<CGFloat, CGFloat> {
        get {
           AnimatablePair(height, width)
        }
        set {
            height = newValue.first
            width = newValue.second
        }
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let rect = CGRect(size: CGSize(width: width, height: height))
        path.addRect(rect)
        return path
    }
}

struct ContentView: View {
    @State var width: CGFloat = 100
    @State var height: CGFloat = 100
    
    var body: some View {
        VStack {
            RectangleView(height: height, width: width)
                .onAppear {
                    // 为height单独设置循环动画
                    withAnimation(.linear(duration: 30).repeatForever()) {
                        height = 200
                    }
                }
            
            Button("Add width via spring", action: {
                // 为width单独设置弹簧动画
                withAnimation(.spring(response: 1, dampingFraction: 0.5, blendDuration: 1)) {
                    width += 10
                }
            })
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

效果验证 #

修改后：

• 视图出现时，height会以30秒线性动画无限循环增长
• 点击按钮时，width会以弹簧动画递增，且不会干扰height的循环动画，完全符合预期。

原写法问题解析 #

SwiftUI的.animation修饰符是作用在整个视图上的，当你多次添加时，后面的配置会直接覆盖前面的。最后添加的.animation(.spring(...), value: width)会成为视图的默认动画，只要视图因任何属性（包括height）更新时，都会使用这个弹簧动画，这就是导致原代码中动画干扰的根本原因。

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