Xcode Preview与Simulator中SwiftUI加载动画表现不一致问题

差异原因 #

这种Preview与Simulator的表现不一致，核心是iOS 16+ SwiftUI动画系统对单独子视图无限重复动画的布局处理逻辑差异：

• 你给每个Circle单独绑定了.animation修饰符，且动画为repeatForever()的无限循环，同时绑定到同一个shouldAnimate状态变量。
• 在Simulator/真机环境中，SwiftUI的布局系统会错误地将动画作用范围扩展到视图的布局位置（比如HStack内的垂直对齐），导致Circle在缩放的同时出现上下位移；而Xcode Preview的渲染环境对这种局部动画的约束处理更严格，仅应用了scaleEffect的视觉变换，未触发布局位移。
• 另外，iOS 16对animation(_:value:)的行为做了调整，当动画是无限重复且绑定到单个状态变量时，更容易出现这种跨布局的动画泄漏问题。

修复方案 #

将动画统一移到父容器HStack上，确保动画仅作用于scaleEffect的变化，不会影响布局：

struct LoadingView: View {
    let color: Color

    @State private var shouldAnimate = false
    
    var body: some View {
        HStack {
            Circle()
                .fill(color)
                .frame(width: 20, height: 20)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
            
            Circle()
                .fill(color)
                .frame(width: 20, height: 20)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .delay(0.3)
            
            Circle()
                .fill(color)
                .frame(width: 20, height: 20)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .delay(0.6)
        }
        .animation(Animation.easeInOut(duration: 0.5).repeatForever(), value: shouldAnimate)
        .onAppear {
            shouldAnimate = true
        }
    }
}

关键说明 #

• scaleEffect属于视觉变换，不会改变视图的布局占位空间，理论上不该影响HStack的布局；但错误的动画作用范围会让SwiftUI误以为布局需要调整，从而产生位移。
• 把动画统一放在父容器，能确保动画仅作用于子视图的缩放变换，不会扩散到布局计算逻辑。

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