SwiftUI 动画视图在 ZStack 中出现时出现奇怪的过渡

问题描述

我对动画加载视图的行为有疑问。网络调用时会显示加载视图。我的 viewmodel 中有一个 isLoading @Published var，而 ActivityIndi​​cator 显示在我视图中的 ZStack 中。 Activityindicator 是一个自定义视图，我在其中为修剪过的圆圈设置动画 - 旋转它。每当活动指示器显示在我的 mainView 中时，它在出现时都会有一个奇怪的过渡 - 它从左上角过渡到视图的中心。有谁知道为什么会这样？我附上了代码的结构和带有行为的 3 张图片。 活动指标：

struct OrangeActivityIndicator: View {
    var style = strokeStyle(linewidth: 6,lineCap: .round)
    @State var animate = false
    let orangeColor = Color.orOrangeColor
    let orangeColorOpaque = Color.orOrangeColor.opacity(0.5)
    
    init(linewidth: CGFloat = 6) {
        style.linewidth = linewidth
    }
    
    var body: some View {
        ZStack {
            CircleView(animate: $animate,firstGradientColor: orangeColor,secondGradientColor: orangeColorOpaque,style: style)
        }.onAppear() {
            self.animate.toggle()
        }
    }
}

struct CircleView: View {
    @Binding var animate: Bool
    var firstGradientColor: Color
    var secondGradientColor: Color
    var style: strokeStyle
    
    var body: some View {
        Circle()
            .trim(from: 0,to: 0.7)
            .stroke(
                AngularGradient(gradient: .init(colors: [firstGradientColor,secondGradientColor]),center: .center),style: style
            )
            .rotationEffect(Angle(degrees: animate ? 360 : 0))
            .transition(.opacity)
            .animation(Animation.linear(duration: 0.7) .repeatForever(autoreverses: false),value: animate)
    }
}

视图用于：

struct UserProfileView: View {
    @Observedobject var viewmodel: UserProfileviewmodel
    @Binding var lightmode: ColorScheme

    var body: some View {
        NavigationView {
            ZStack {
                vstack(alignment: .center,spacing: 12) {
                    HStack {
                        Text(userProfileEmail)
                            .font(.headline)
                            .foregroundColor(Color(UIColor.label))
                        Spacer()
                    }.padding(.bottom,16)
                    SettingsView(userProfile: $viewmodel.userProfile,isDarkMode: $viewmodel.isDarkMode,lightmode: $lightmode,location: viewmodel.locationManager.address,viewmodel: viewmodel)
                    ButtonsView( userProfile: $viewmodel.userProfile)
                    Spacer()

                }.padding([.leading,.trailing],12)

                if viewmodel.isLoading {
                    OrangeActivityIndicator()
                        .frame(width: 40,height: 40)
//                        .animation(nil)
                }
            }
        }
    }
}

我也尝试过动画 nil 但它似乎不起作用。 以下是图片：

解决方法

这是一个可能的解决方案 - 把它覆盖 NavigationView。使用 Xcode 12.4 / iOS 14.4 测试

    NavigationView {

       // .. your content here

    }
    .overlay(                    // << here !!
        VStack {
            if isLoading {
                OrangeActivityIndicator()
                    .frame(width: 40,height: 40)
            }
        }
    )