0

我在 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)
        }
}
4

1 回答 1

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
            }
        }
    }
}
于 2021-01-07T10:05:36.540 回答