SwiftUI子视图如何在保留自身动画时遵循父视图动画？

你当前的问题在于：子视图通过自身onAppear触发独立动画上下文，导致其过渡和父视图的底部移动动画分离，无法实现叠加效果。要让两个动画同步执行，关键是让子视图的动画和父视图共享同一个动画上下文，而不是各自触发独立动画。

解决方案1：共享状态与动画上下文 #

将子视图的显示状态提升到父视图，在同一个withAnimation块中同时修改父视图和子视图的状态，让两者的过渡动画在同一上下文执行：

struct ContentView: View {
    @State private var presentParent = false
    @State private var presentChild = false
    
    var body: some View {
        if presentParent {
            ZStack {
                Rectangle()
                    .foregroundColor(.blue)
                    .frame(width: 300, height: 200)
                ChildView(presentChild: $presentChild)
            }
            .transition(.move(edge: .bottom))
        } else {
            Color.clear
                .onAppear {
                    withAnimation(.linear(duration: 2)) {
                        // 同时触发父视图和子视图的显示状态
                        presentParent = true
                        presentChild = true
                    }
                }
        }
    }
}

struct ChildView: View {
    @Binding var presentChild: Bool
    
    var body: some View {
        if presentChild {
            Text("EXAMPLE")
                .font(.largeTitle)
                .foregroundStyle(.red)
                .transition(.move(edge: .trailing))
        } else {
            Color.clear
        }
    }
}

解决方案2：直接使用偏移与透明度控制 #

避免条件渲染带来的过渡动画分离，通过offset和opacity直接控制子视图的显示状态，自然继承父视图的动画上下文：

struct ContentView: View {
    @State private var presentParent = false
    
    var body: some View {
        if presentParent {
            ZStack {
                Rectangle()
                    .foregroundColor(.blue)
                    .frame(width: 300, height: 200)
                ChildView(isVisible: presentParent)
            }
            .transition(.move(edge: .bottom))
        } else {
            Color.clear
                .onAppear {
                    withAnimation(.linear(duration: 2)) {
                        presentParent = true
                    }
                }
        }
    }
}

struct ChildView: View {
    let isVisible: Bool
    
    var body: some View {
        Text("EXAMPLE")
            .font(.largeTitle)
            .foregroundStyle(.red)
            // 右侧滑入效果：从屏幕右侧偏移到原位
            .offset(x: isVisible ? 0 : UIScreen.main.bounds.width)
            // 配合透明度动画更自然
            .opacity(isVisible ? 1 : 0)
    }
}

原理说明 #

• 原代码中，子视图的onAppear会创建独立的动画上下文，导致其过渡动画与父视图的底部移动动画各自执行，无法叠加。
• 上述两种方案均让子视图的动画依赖父视图的动画上下文，确保父视图的底部移动和子视图的右侧滑入动画同步执行，实现预期的叠加效果。

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