面试题：SwiftUI中如何定制复杂的转场效果

Question

描述在SwiftUI中，从一个视图导航到另一个视图时，如何自定义转场效果，使其不仅仅是默认的滑动效果，比如实现一个带有缩放和旋转的转场动画，需要阐述关键的API和实现思路，并给出部分关键代码。

Answer 1

关键API

1. NavigationLink：用于在SwiftUI中创建导航链接，从一个视图导航到另一个视图。
2. withAnimation：用于包裹需要执行动画的代码块，控制动画的执行。
3. transition：视图修饰符，用于定义视图的转场效果。其中包含多种预定义的转场，也可以自定义。

实现思路

1. 创建两个视图，一个作为源视图，一个作为目标视图。
2. 在源视图中使用NavigationLink来触发导航到目标视图。
3. 为NavigationLink或目标视图应用自定义的transition，通过AnyTransition来组合缩放和旋转效果。
4. 使用withAnimation来控制转场动画的执行。

关键代码

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink("Navigate with custom transition", destination: DetailView())
                    .padding()
            }
            .navigationTitle("Home")
        }
    }
}

struct DetailView: View {
    var body: some View {
        VStack {
            Text("This is the detail view")
                .padding()
        }
        .navigationTitle("Detail")
        // 自定义转场效果
        .transition(.customTransition)
    }
}

extension AnyTransition {
    static var customTransition: AnyTransition {
        AnyTransition.scale(scale: 0.5)
            .combined(with: .rotation(angle: .degrees(360)))
            .combined(with: .opacity)
    }
}

在上述代码中：

1. ContentView是源视图，包含一个NavigationLink，点击它会导航到DetailView。
2. DetailView是目标视图，通过.transition(.customTransition)应用了自定义转场效果。
3. AnyTransition扩展定义了customTransition，它组合了缩放、旋转和透明度的转场效果。