SwiftUI - 过渡

过渡是应用于视图在视图层次结构中插入或移除时的特殊效果。或者我们可以说，它们通常用于确定视图如何进入或退出屏幕。它们就像我们在视频开头和结尾应用的过渡效果一样。

过渡可以应用于那些响应状态更改的视图，这意味着它们只能在附加到动画时进行动画处理，它们不能与在屏幕上保持可见状态的同时更改其属性的那些视图一起使用。在本章中，我们将学习如何应用过渡、不同类型的过渡以及更多关于过渡的信息。

SwiftUI 中的“.transition”修饰符

.transition 修饰符用于将过渡附加到给定视图。当指定的视图出现在屏幕上或从屏幕上移除时，此时将应用过渡。

语法

以下是语法 -

func transition(_ t: AnyTransition) -> some View

它只接受一个参数，即我们想要应用于视图的过渡类型。其值可以是：.opacity、.identity、.move、.offset、.push、.scale、.slide、.asymmetric 和 .combine。

如何在 SwiftUI 中应用过渡

要在视图上应用过渡效果，我们必须遵循以下步骤 -

步骤 1：创建一个状态变量来控制视图的外观。
步骤 2：根据给定条件使用 if 或 switch 语句添加或移除视图。
步骤 3：将 .transition() 修饰符应用于我们想要对其进行动画处理的视图。
步骤 4：将视图的外观包装在动画中，通常与 withAnimation() 一起使用。

示例

在以下 SwiftUI 程序中，我们对 Text 视图应用了 blurReplace 过渡效果。

import SwiftUI
struct ContentView: View {    
   @State private var myState = false    
   var body: some View {    
      ZStack{            
         Circle().fill(.indigo).frame(width: 250, height: 250)
         if myState{
            Text("TutorialsPoint").foregroundStyle(.white)
            .font(.largeTitle).transition(.blurReplace)
         }
      }.padding(30)
      Button("Click Me"){
         withAnimation(.default){
            myState.toggle()
         }
      }.font(.title)
   }
}
#Preview {
   ContentView()
}

输出

SwiftUI 中的过渡类型

在 SwiftUI 中，我们使用以下内置过渡来为视图的外观设置动画 -

恒等过渡：这是默认过渡。它简单地显示视图，没有任何特殊的过渡。
```
transition(.identity)
```
移动过渡：此过渡将子视图移离或朝向父视图的给定边缘。它可以在多个方向上工作，例如顶部、底部、前导和尾随。
```
transition(.move(edge:.top))
```
偏移过渡：此过渡通过将其移动到给定的偏移量值来为视图设置动画。
```
transition(.offset(x:1.1, y: 2.2))
```
不透明度过渡：此过渡对给定视图应用淡入和淡出效果。
```
transition(.opacity)
```
推动过渡：此过渡通过将其移动到指定的边缘同时淡入来为视图的插入设置动画，并通过将其移出到指定边缘的相对侧（例如顶部、底部、尾随和前导）同时淡出视图来为视图的移除设置动画。
```
transition(.push(edge:.top))
```
缩放过渡：此过渡在进入时增加视图的大小，并在离开屏幕时减小视图的大小。我们还可以使用 anchor 参数控制过渡开始的位置。
```
transition(.scale(scale:23, anchore:UniPoint(x:2, y:1)))
```
滑动过渡：此过渡将视图从左向右移动。或者我们可以说它在将其移动到前导边缘时插入视图，并通过移出到尾随边缘将其移除。
```
transition(.slide)
```
非对称过渡：此过渡允许我们创建复合过渡，这意味着一个视图使用不同的过渡进行插入和移除。
```
transition(.asymmetric(insertion:.slide, removal:.scale))
```
模糊和替换过渡：此过渡允许我们通过将模糊和缩放效果相互混合来为视图的开始和移除设置动画。
```
transition(.blurReplace)
```
符号效果过渡：此过渡在插入和从视图中移除时对符号图像应用默认符号效果。它仅适用于符号图像。
```
transition(.symbolEffect)
```

示例 1

在以下 SwiftUI 程序中，我们对 Text 视图应用了滑动过渡。

import SwiftUI

struct ContentView: View {
   @State private var anime = false
   var body: some View {
      ZStack {
         Circle().fill(.indigo).frame(width: 250, height: 250)
         if anime {
            Text("TutorialsPoint")
               .foregroundStyle(.white)
               .font(.largeTitle)
               // Applying slide transition on the text view
               .transition(.slide)
         }
      }.padding(30)

      Button("Click Me") {
         withAnimation(.default) {
            anime.toggle()
         }
      }
      .font(.title)
   }
}

#Preview {
   ContentView()
}

输出

示例 2

在以下 SwiftUI 程序中，我们对 Shape 视图应用了推动过渡。

import SwiftUI
struct ContentView: View {
   @State private var anime = false
   var body: some View {
      VStack {
         if anime {
            Circle().fill(.indigo).frame(width: 250, height: 250)

               // Applying push transition on the shape view
               // Here the shape will appear from the top of the view
               .transition(.push(from: .top))
         }
      }.padding(30)

      Button("Click Me") {
         withAnimation(.default) {
            anime.toggle()
         }
      }.font(.title)
   }
}

#Preview {
   ContentView()
}

输出

在 SwiftUI 中组合过渡

在 SwiftUI 中，我们允许组合多个过渡以创建新的效果。这可以通过在 .transition() 修饰符内使用 .combine 作为参数来实现。

语法

以下是语法 -

func transition(.combine(with: AnyTransition)) -> some View

with 参数的值可以是：.opacity、.identity、.move、.offset、.push、.scale、.slide、.asymmetric、.combine、.blurReplace 和 .symbolEffect。

示例

在以下 SwiftUI 程序中，我们对 Shape 视图应用了推动过渡。

import SwiftUI

struct ContentView: View {
   @State private var anime = false
   var body: some View {
      ZStack {
         Rectangle().stroke(.indigo, lineWidth: 5).frame(width: 250, height: 100)
         if anime {
            Text("TutorialsPoint")
               .foregroundStyle(.indigo)
               .font(.largeTitle)
               .transition(.push(from: .leading).combined(with: .scale))
         }
      }.padding(30)
      Button("Click Me") {
         withAnimation(.default) {
            anime.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

输出

打印页面