SwiftUI自定义PulsatingView嵌入VStack后动画路径异常怎么解决？

问题原因 #

• 隐式动画未指定响应的状态值：你代码里的.animation修饰符没有添加value参数，会默认监听所有可动画属性的变化，当父容器发生布局更新、其他元素尺寸变化时，PulsatingView自身的位置、尺寸变化也会被带入这个无限重复的动画逻辑，就出现了异常偏移。
• 容器尺寸适配问题：PulsatingView默认没有固定大小，会跟随内部Circle的缩放动态调整自身尺寸，放在父容器中时会和其他元素的布局约束互相影响，导致动画过程中位置漂移。

修复方案 #

你可以按以下方式修改代码，即可解决偏移问题：

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

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

核心修改点 #

• 移除无意义的外层VStack，直接用ZStack作为根容器
• 给两个.animation修饰符分别添加对应的value参数，让动画仅在opacity和scale变化时触发，不会响应父容器的布局更新等其他状态变化
• 给根ZStack设置固定尺寸，足以容纳缩放5倍后的Circle，避免内部元素缩放影响容器自身的布局计算，也不会和父容器的其他布局约束冲突。

内容的提问来源于stack exchange，提问作者LinusG.