SwiftUI中NavigationStack内BlinkingCircle视图意外上下移动问题求助

我在SwiftUI中实现了一个无限闪烁的BlinkingCircle视图，将其推入NavigationStack后，视图出现了无意义的上下移动。即使注释掉透明度动画代码，移动现象仍然存在，无法定位原因。

复现代码如下：

import SwiftUI

struct ContentView: View {
    @State private var pushedViewIDs: [String] = []

    var body: some View {
        NavigationStack(path: $pushedViewIDs) {
            Form {
                NavigationLink(value: "blinking-circle") {
                    Label("Push blinking circle", systemImage: "arrow.forward")
                }
            }
            .navigationTitle("App")
            .navigationDestination(for: String.self) { pushedViewID in
                if pushedViewID == "blinking-circle" {
                    BlinkingCircle()
                }
            }
        }
    }
}

struct BlinkingCircle: View {
    @State private var isTranslucent = false

    var body: some View {
        Circle()
            .frame(width: 200, height: 200)
            .opacity(isTranslucent ? 0.3 : 1) // 注释此行后移动现象仍存在
            .onAppear {
                withAnimation(.linear(duration: 1).repeatForever()) {
                    isTranslucent.toggle()
                }
            }
    }
}

#Preview {
    ContentView()
}

问题原因 #

这个问题的核心是全局动画作用域污染：当你在onAppear中用withAnimation包裹状态修改时，该动画会被设置为当前视图层级的默认动画。而NavigationStack推送视图时本身存在过渡动画，你的无限重复动画会意外作用到导航视图的布局变化上，导致视图位置被错误地动画化——即使注释掉透明度代码，全局动画作用域依然存在，所以移动现象不会消失。

解决方案 #

方案1：使用绑定式动画（推荐） #

将动画通过animation(_:value:) modifier绑定到目标状态，严格限制动画作用范围：

struct BlinkingCircle: View {
    @State private var isTranslucent = false

    var body: some View {
        Circle()
            .frame(width: 200, height: 200)
            .opacity(isTranslucent ? 0.3 : 1)
            // 仅当isTranslucent变化时应用动画
            .animation(.linear(duration: 1).repeatForever(), value: isTranslucent)
            .onAppear {
                isTranslucent.toggle()
            }
    }
}

方案2：使用Transaction隔离动画 #

如果必须保留withAnimation写法，可通过Transaction明确指定动画作用对象，避免全局污染：

struct BlinkingCircle: View {
    @State private var isTranslucent = false

    var body: some View {
        Circle()
            .frame(width: 200, height: 200)
            .opacity(isTranslucent ? 0.3 : 1)
            .onAppear {
                var transaction = Transaction()
                transaction.animation = .linear(duration: 1).repeatForever()
                // 仅将动画应用于此次状态修改
                withTransaction(transaction) {
                    isTranslucent.toggle()
                }
            }
    }
}

两种方案都能让动画仅作用于透明度变化，不会干扰NavigationStack的过渡逻辑，彻底消除视图上下移动的问题。

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