NavigationStack内VStack子视图动画触发额外属性动画问题

问题根源 #

你遇到的问题是因为动画修饰符的作用范围过大，结合NavigationStack的布局时机导致的：

• 当onAppear触发animating状态切换时，NavigationStack还未完成子视图的布局计算，矩形的位置属性（比如相对于父容器的偏移）正从初始的(0,0)过渡到最终布局位置。
• 你原来的animation修饰符作用于整个矩形视图的所有属性变化，所以位置调整和透明度变化都被纳入了动画范围，最终出现位置+透明度同时动画的效果。

解决方案 #

推荐使用显式动画（withAnimation）来精准控制动画作用对象，避免不必要的属性被动画化：

struct POCNavigationStackBehavior: View {
    @State private var animating = false
    var body: some View {
        NavigationStack {
            VStack {
                RoundedRectangle(cornerRadius: 15.0)
                    .fill(.quaternary)
                    .padding(.horizontal)
                    .frame(height: 200)
                    .opacity(animating ? 0.3 : 1)
            }
        }
        .onAppear {
            // 用withAnimation包裹状态切换，仅对该状态关联的属性变化应用动画
            withAnimation(.easeInOut(duration: 0.75).repeatForever()) {
                animating.toggle()
            }
        }
    }
}

也可以通过缩小动画修饰符的作用范围实现，将animation紧跟在opacity修饰符之后，明确仅对透明度变化触发动画：

struct POCNavigationStackBehavior: View {
    @State private var animating = false
    var body: some View {
        NavigationStack {
            VStack {
                RoundedRectangle(cornerRadius: 15.0)
                    .fill(.quaternary)
                    .padding(.horizontal)
                    .frame(height: 200)
                    .opacity(animating ? 0.3 : 1)
                    // 仅绑定透明度相关的状态变化作为动画触发条件
                    .animation(.easeInOut(duration: 0.75).repeatForever(), value: animating ? 0.3 : 1)
            }
        }
        .onAppear {
            animating.toggle()
        }
    }
}

这两种方式都能确保只有透明度属性被动画化，位置布局的变化会直接完成，不会产生过渡动画。

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