动画不是从预期的位置中心开始，而不是从顶部开始

Question

我正在尝试实现一个动画来象征“向下滑动”。这基本上是一个按比例缩放并向下移动的圆。我已经做到了，但是它只能通过轻击手势来启动动画，并且我想在使用onAppear出现内容之后立即运行动画。

所以，这很好（从中间开始）：

Circle()
    .foregroundColor(.gray)
    .frame(width: 60, height: 60)
    .shadow(radius: 10)
    .offset(y: self.animated ? 350 : 0)
    .scaleEffect(self.animated ? 0.33 : 1)
    .onTapGesture {
        withAnimation(Animation.linear(duration: 1).delay(0.8).repeatForever(autoreverses: false)) {
            self.animated.toggle()
        }
    }

这不起作用：

Circle()
    .foregroundColor(.gray)
    .frame(width: 60, height: 60)
    .shadow(radius: 10)
    .offset(y: self.animated ? 350 : 0)
    .scaleEffect(self.animated ? 0.33 : 1)
    .onAppear {
        withAnimation(Animation.linear(duration: 1).delay(0.8).repeatForever(autoreverses: false)) {
            self.animated.toggle()
        }
    }

动画从开头开始，但是我认为使用onAppear时每个元素都已经到位。

有什么线索为什么动画不能从应该开始的地方开始？

更新

完整内容查看代码：

struct ContentView: View {

    @State var animated = false

    var body: some View {
        NavigationView {
            ZStack {
                Circle()
                    .foregroundColor(.gray)
                    .frame(width: 60, height: 60)
                    .shadow(radius: 10)
                    .offset(y: self.animated ? 350 : 0)
                    .scaleEffect(self.animated ? 0.33 : 1)
                    .onAppear {
                        withAnimation(Animation.linear(duration: 1).delay(0.8).repeatForever(autoreverses: false)) {
                            self.animated.toggle()
                        }
                    }
            }
        }
    }

}

Answer 1

只需找出问题所在。由于某种原因，NavigationView弄乱了Circle的初始布局。我刚刚将其删除，一切按预期开始工作。

最终代码：

struct ContentView: View {

    @State var animated = false

    var body: some View {
        ZStack {
            Circle()
                .foregroundColor(.gray)
                .frame(width: 60, height: 60)
                .shadow(radius: 10)
                .offset(y: self.animated ? 350 : 0)
                .scaleEffect(self.animated ? 0.33 : 1)
                .onAppear {
                    withAnimation(Animation.linear(duration: 1).delay(0.8).repeatForever(autoreverses: false)) {
                        self.animated.toggle()
                    }
                }
        }
    }

}