SwiftUI 中的自定义 segue 动画（导航动画）

Question

在 SwiftUI 中，我们使用 NavigationView 和 NavigationLink 视图来执行导航（我们过去在 UIKit 中称为 segue）。 UIKit 中的标准segue 是show segue。在 SwiftUI 中我们可以简单地做：

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Destination")) {
                    Text("Navigate!")
                }
            }
        }
    }
}

具有完全相同的效果（即使 segue 这个词已经消失）。

有时（实际上相当频繁）我们需要自定义转场动画。

• 我们可以决定根本不为 segue 设置动画，实际上在 故事板我们可以找到属性Animates (true/false) 通过单击 segue 来进行属性检查器。这样，目标视图控制器会立即出现在源视图控制器的位置。
• 或者我们可以决定执行自定义动画。通常这是通过实现一个符合UIViewControllerAnimatedTransitioning 协议的对象来完成的。所有的魔法都发生在 animateTransition 方法中，它使我们能够访问源视图控制器和目标视图控制器。

例如，一个简单的交叉淡入淡出转场动画可能是这样的：

-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    UIView* containerView = [transitionContext containerView];
    UIViewController* fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController* toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

    toVC.view.alpha = 0;
    [containerView addSubview:toVC.view];

    [UIView animateWithDuration:1 animations:^{
        toVC.view.alpha = 1;
        fromVC.view.alpha = 0;
    } completion:^(BOOL finished) {
        [fromVC.view removeFromSuperview];
        [transitionContext completeTransition:YES];
    }];
}

现在的问题是：如何在 SwiftUI 中获得相同的效果？是否可以不为导航设置动画或自定义导航动画？我希望能够做到：

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Destination")) {
                    Text("Navigate!")
                }
            }
        }
        .animation(nil)
    }
}

或类似的东西阻止动画（或添加自定义动画），但没有任何变化。

Answer 1

不幸的是，仍然无法在 SwiftUI (xCode 11.3.1) 中自定义 NavigationView 过渡动画。

寻找一种方法，我最终创建了这个名为swiftui-navigation-stack (https://github.com/biobeats/swiftui-navigation-stack) 的开源项目，其中包含NavigationStackView，这是一个模仿标准NavigationView 导航行为的视图，添加了一些有用的特征。例如，您可以关闭转场动画，也可以使用您喜欢的转场对其进行自定义。

几个月前，我在这里问过如何关闭过渡动画。为此，您可以这样使用NavigationStackView：

struct ContentView : View {
    var body: some View {
        NavigationStackView(transitionType: .none) {
            ZStack {
                Color.yellow.edgesIgnoringSafeArea(.all)

                PushView(destination: View2()) {
                    Text("PUSH")
                }
            }
        }
    }
}

struct View2: View {
    var body: some View {
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)
            PopView {
                Text("POP")
            }
        }
    }
}

如果您将.none 指定为transitionType，您可以关闭动画。 PushView 和 PopView 是两个允许你推送和弹出视图的视图（类似于 SwiftUI NavigationLink）。

结果是：

如果您想要自定义过渡动画（正如我在上面的问题中使用交叉淡入淡出示例所问的那样），您可以这样做：

struct ContentView : View {
    let navigationTransition = AnyTransition.opacity.animation(.easeOut(duration: 2))

    var body: some View {
        NavigationStackView(transitionType: .custom(navigationTransition)) {
            ZStack {
                Color.yellow.edgesIgnoringSafeArea(.all)

                PushView(destination: View2()) {
                    Text("PUSH")
                }
            }
        }
    }
}

struct View2: View {
    var body: some View {
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)

            PopView {
                Text("POP")
            }
        }
    }
}

对于我指定的交叉转换：

let navigationTransition = AnyTransition.opacity.animation(.easeOut(duration: 2))

持续 2 秒的交叉淡入淡出过渡。然后我将这个过渡传递给NavigationStackView：

NavigationStackView(transitionType: .custom(navigationTransition))