SwiftUI加载视图动画异常：如何实现仅中间闪烁效果？

你的问题根源在于通过if isLoading动态添加/移除视图，这会触发SwiftUI的布局过渡动画，导致视图从左上角进入。要实现仅在中间闪烁的效果，需要固定加载视图的位置，避免布局变化，只做透明度动画。

推荐两种修改方式：

方式一：使用ZStack固定位置 #

把加载视图放在ZStack中，始终占据居中位置，通过opacity控制显示/隐藏：

var body: some View {
    NavigationStack(path: $navigationPathManager.path) {
        ZStack {
            // 这里放置你的主页面内容
            // ...
            
            // 加载动画视图，固定居中
            if isLoading {
                HStack {
                    Image(systemName: "pawprint.fill")
                        .resizable()
                        .frame(width: 100, height: 100)
                    Image(systemName: "pawprint.fill")
                        .resizable()
                        .frame(width: 100, height: 100)
                }
                .opacity(animate ? 0.2 : 1.0)
                .animation(Animation.easeInOut(duration: 1.0).repeatForever(autoreverses: true), value: animate)
                .onAppear {
                    animate = true
                }
            }
        }
    }
}

方式二：使用Overlay覆盖层 #

如果主内容已有完整布局，用overlay更简洁，自动将加载视图居中于主内容之上：

var body: some View {
    NavigationStack(path: $navigationPathManager.path) {
        // 这里放置你的主页面内容
        // ...
        .overlay {
            if isLoading {
                HStack {
                    Image(systemName: "pawprint.fill")
                        .resizable()
                        .frame(width: 100, height: 100)
                    Image(systemName: "pawprint.fill")
                        .resizable()
                        .frame(width: 100, height: 100)
                }
                .opacity(animate ? 0.2 : 1.0)
                .animation(Animation.easeInOut(duration: 1.0).repeatForever(autoreverses: true), value: animate)
                .onAppear {
                    animate = true
                }
            }
        }
    }
}

关键调整说明： #

• 移除了原代码中的Spacer()，避免两个 pawprint 被拉向左右两侧，现在它们会在HStack中并排居中。
• 不再通过添加/移除视图控制加载状态，而是固定位置后用透明度切换，彻底消除布局动画导致的位置偏移。
• 如果需要更强制的居中，可给HStack添加.frame(maxWidth: .infinity, maxHeight: .infinity)，确保它占满父视图空间，内部内容自然居中。

内容的提问来源于stack exchange，提问作者Ali Düşkün