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()
}

輸出

列印頁面