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
            }
        }
    }
}

SwiftUI 动画期间意外的位置变化

SwiftUI unexpected position changes during animation

animation

swiftui

swiftui-animation