09.过渡动画

在 iOS 应用程序中，过渡动画可以为用户提供更好的界面交互体验，使界面切换更加平滑和自然。SwiftUI 中提供了多种内置的过渡动画类型，同时也支持自定义动画。

系统过渡动画

SwiftUI 中提供了多种内置的过渡动画类型，可以在视图间进行切换时使用。这些动画类型都是基于系统提供的 Core Animation 框架实现的，因此性能非常高效。下面是一些常用的内置过渡动画类型：

• .default：默认过渡动画，包括淡入淡出和滑动两种效果。
• .scale：缩放过渡动画，视图从小到大或从大到小缩放。
• .slide：滑动过渡动画，视图在屏幕中从左往右或从右往左滑动。
• .opacity：透明度过渡动画，视图从完全透明到不透明或反之。
• .move：移动过渡动画，视图在屏幕中移动。
• .offset：偏移过渡动画，视图在屏幕中沿着 x 轴或 y 轴移动。 下面是一个简单的示例代码，展示如何使用内置过渡动画：

struct ContentView: View {
    @State private var isShowingSecondView = false

    var body: some View {
        VStack {
            if isShowingSecondView {
                Text("Second View")
                    .transition(.scale)
            } else {
                Text("First View")
                    .transition(.scale)
            }

            Button("Toggle") {
                withAnimation {
                    self.isShowingSecondView.toggle()
                }
            }
        }
    }
}

ContentView 中创建了一个 isShowingSecondView 状态变量，用于控制显示哪个视图。当用户点击 Toggle 按钮时，使用 withAnimation 代码块包裹状态变量的切换，以便在切换时使用动画。

在第一个 Text 视图和第二个 Text 视图中都添加了 .transition(.scale) 修饰符，这表示希望使用内置的缩放过渡动画。当用户点击 Toggle 按钮时，视图将根据状态变量的值进行切换，并使用所选过渡动画过渡。

自定义过渡动画

创建过渡动画

要创建自定义过渡动画，需要使用 SwiftUI 的 ViewModifier 协议和 View.transition() 方法。下面是一个简单的自定义过渡动画示例：

struct CustomTransition: ViewModifier {
    let animation: Animation
    
    func body(content: Content) -> some View {
        content
            .transition(.scale)
            .animation(animation)
    }
}

extension AnyTransition {
    static var customTransition: AnyTransition {
        let insertion = AnyTransition.modifier(
            active: CustomTransition(animation: .easeInOut),
            identity: CustomTransition(animation: .easeInOut)
        )
        
        let removal = AnyTransition.modifier(
            active: CustomTransition(animation: .easeInOut),
            identity: CustomTransition(animation: .easeInOut)
        )
        
        return .asymmetric(insertion: insertion, removal: removal)
    }
}

上述代码定义了一个名为 CustomTransition 的自定义 ViewModifier，它使用 View.transition() 方法并指定了一个 .scale 的过渡动画。同时，我们还为该自定义过渡动画提供了一个 animation 参数，用于指定动画的类型。

此外还通过扩展 AnyTransition 协议来定义了一个名为 customTransition 的过渡动画，它使用了上述定义的 CustomTransition 来作为其自定义的过渡动画。使用 .asymmetric 方法来同时定义插入和移除时的过渡动画效果。

使用自定义过渡动画

在使用自定义过渡动画时，可以像使用内置过渡动画一样，通过将其传递给 View.transition() 方法来应用它。

struct ContentView: View {
    @State private var show = false
    
    var body: some View {
        VStack {
            if show {
                Text("Hello, world!")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .transition(.customTransition)
            }
            
            Button("Toggle") {
                withAnimation {
                    show.toggle()
                }
            }
        }
    }
}

上述代码使用 Button 来切换一个名为 show 的布尔值，从而控制是否显示一个 Text 视图。当 show 的值为 true 时使用 .customTransition 自定义过渡动画来为 Text 视图添加动画效果。在点击 Toggle 按钮时，使用 withAnimation 来对状态变化进行动画处理。