SwiftUI View 在意想不到的路径上动画

Question

我制作了以下 PulsatingView:

struct PulsatingView: View {
    
    @State private var opacity = 0.7
    @State private var scale: CGFloat = 0.5

    var body: some View {
        VStack {
            ZStack {
                Circle()
                    .fill(Color.black.opacity(opacity))
                    .animation(.easeInOut(duration: 2).delay(1.5).repeatForever(autoreverses: false))
                    .frame(width: 7, height: 7)
                    .scaleEffect(scale)
                    .animation(.easeIn(duration: 2.5).delay(1).repeatForever(autoreverses: false))
                Circle()
                    .fill(Color.black)
                    .frame(width: 7, height: 7)
            }
        }
        .onAppear {
            opacity = 0
            scale = 5
        }
    }
}

它产生以下结果:(点击查看动画；它是一个 .gif)

但是，当我将它添加到 View 中时，例如在 VStack 中，会发生这种情况:(单击以查看动画；它是一个 .gif)

我不知道为什么会这样，也不知道该如何解决。我已经尝试添加诸如 .fixedSize(horizo​​ntal: true, vertical: true) 或 .frame(width: 50, height: 50) 之类的修饰符，但是没有帮助。

有人知道这是怎么回事吗？

Answer 1

尝试使用具有连接值的动画，例如

Circle()
    .fill(Color.black.opacity(opacity))
    .animation(.easeInOut(duration: 2).delay(1.5).repeatForever(autoreverses: false), value: opacity) // << here !!
    .frame(width: 7, height: 7)
    .scaleEffect(scale)
    .animation(.easeIn(duration: 2.5).delay(1).repeatForever(autoreverses: false), value: scale)    // << here !!

重要提示:如果它是在 NavigationView 中启动的，那么动画状态应该被推迟激活。 https://stackoverflow.com/a/66643096/12299030 中提供了原因和调查详情.