SwiftUI自定义LoadingView永久重复动画在NavigationView中显示异常

问题原因 #

异常动效是同一渲染周期内两个动画被合并触发导致的：

• NavigationView的根视图初始布局时，会从默认的左上角位置调整到居中位置，这个布局变化被onAppear中触发的动画块捕获，被自动加上了过渡动效
• 原本的旋转动画和位置过渡动效叠加，就出现了loading视图从左上角移入的效果

解决方案 #

可通过以下两种方法修复，同时使用效果更稳定：

方案1：强制根视图初始位置居中 #

在ContentView中给LoadingView外层套一个占满全屏的容器，让loading视图从渲染初始就处于屏幕中心，避免出现位置变化的动画：

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                // 用透明底色撑满整个屏幕
                Color.clear
                LoadingView()
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

方案2：单独给旋转属性绑定动画 #

修改LoadingView的动画实现，仅让旋转效果响应isLoading状态的变化，避免捕获其他布局属性的变化：

struct LoadingView: View {
    @State private var isLoading = false
    var body: some View {
        Circle()
            .trim(from: 0, to: 0.8)
            .stroke(Color.primaryDota, lineWidth: 5)
            .frame(width: 30, height: 30)
            .rotationEffect(Angle(degrees: isLoading ? 360 : 0))
            // 仅对rotation属性生效，只响应isLoading的状态变化
            .animation(.linear(duration: 1).repeatForever(autoreverses: false), value: isLoading)
            .onAppear {
                isLoading.toggle()
            }
    }
}

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