SwiftUI 动画期间位置发生意外变化

Question

我在 SwiftUI 中制作了一个简单的动画，它在启动应用程序时直接永久重复。然而，当运行代码时，动画圆圈会转到左上角，然后在执行其余动画时返回到其正常位置。这个左上角的动画不是预期的，也没有写在我的代码中。

示例代码：

struct Loader: View {
    
    @State var animateFirst = false

    @State var animationFirst = Animation.easeInOut(duration: 3).repeatForever()
    var body: some View {
        ZStack {
            Circle().trim(from: 0, to: 1).stroke(ColorsPalette.Primary, style: StrokeStyle(lineWidth: 3, lineCap: .round)).rotation3DEffect(
                .degrees(self.animateFirst ? 360 : -360),
                axis: (x: 1, y: 0, z: 0), anchor: .center).frame(width: 200, height: 200, alignment: .center).animation(animationFirst).onAppear {
                self.animateFirst.toggle()
            }
        }
    }
    
}

然后在这样的视图中显示它：

struct LoaderViewer: View {
    
    var body: some View {
        VStack {
            Loader().frame(width: 200, height: 200)
        }
}

Answer 1

我不知道为什么会发生这种情况，但我有一个模糊的想法。由于动画在视图完全呈现宽度和高度之前开始，因此视图从左上角开始。动画采用动画中的起始位置并更改为其正常位置，并使用给定的动画不断重复这部分。这会导致这种意外的行为。

我认为这是一个错误，但根据上述理论，我现在已经创建了一个解决方法。在我们放置加载器的视图中，我们必须等到父视图完全渲染后再添加动画视图（加载器视图），我们可以这样做：

struct LoaderViewer: View {

    @State showLoader = false

    var body: some View {
        VStack {
            if showLoader {
                Loader().frame(width: 200, height: 200)
            }
        }.onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
                showLoader = true
            }
        }
    }
}