如何为macOS的NavigationStack设置类似App Store的Push/Pop滑动动画？

macOS上的NavigationStack默认没有iOS那样的侧滑切换动画，要实现类似App Store的Push（右滑进入）、Pop（左滑退出）效果，你可以通过绑定导航路径、结合自定义过渡动画来实现，具体代码如下：

enum Nav {
    case a
}

struct MainView: View {
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            Button("Go to a") {
                withAnimation(.easeInOut) {
                    path.append(Nav.a)
                }
            }
            .navigationDestination(for: Nav.self) { _ in
                Text("a")
                    .transition(.customPush)
                    .toolbar {
                        ToolbarItem(placement: .navigation) {
                            Button("Back") {
                                withAnimation(.easeInOut) {
                                    path.removeLast()
                                }
                            }
                        }
                    }
            }
        }
    }
}

// 自定义不对称过渡动画，模拟App Store的切换效果
extension AnyTransition {
    static var customPush: AnyTransition {
        let insertion = AnyTransition.move(edge: .trailing)
            .combined(with: .opacity)
        let removal = AnyTransition.move(edge: .leading)
            .combined(with: .opacity)
        return .asymmetric(insertion: insertion, removal: removal)
    }
}

关键说明： #

• 绑定导航路径：通过NavigationPath绑定NavigationStack，让我们能手动控制导航栈的更新，并用withAnimation包裹操作，确保动画触发。
• 自定义过渡动画：定义customPush不对称过渡，进入时从右侧滑入并淡入，退出时向左侧滑出并淡出，完美匹配需求的动画效果。
• 手动处理返回动作：自定义导航栏返回按钮，同样用withAnimation包裹路径回退操作，保证Pop时的左滑动画生效（默认导航栏返回按钮可能不会自动触发动画，手动处理更可靠）。

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