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 中，我们使用以下内置过渡来为视图的外观设置动画 −

• Identity 过渡:这是默认过渡。它简单地显示视图，没有任何特殊过渡。

  transition(.identity)
  

• 移动过渡:此过渡将子视图移离或移向父视图的给定边缘。它可以在多个方向工作，例如顶部、底部、前导和尾部。

  transition(.move(edge:.top))
  

• 偏移过渡:此过渡通过将视图移动到给定的偏移值来为视图设置动画。

  transition(.offset(x:1.1, y: 2.2))
  

• 不透明度过渡:此过渡对给定视图应用淡入淡出效果。

  transition(.opacity)
  

• 推动过渡:此过渡为插入动画通过在淡入时将视图移入指定边缘来动画化视图，并通过在淡出视图时将其移出指定边缘的另一侧(例如顶部、按钮、尾部和前部)来动画化视图的移除。

  transition(.push(edge:.top))
  

• 缩放过渡:此过渡在进入屏幕时增加视图的大小，在离开屏幕时减小视图的大小。我们还可以使用锚点参数控制过渡开始的位置。

  transition(.scale(scale:23, anchore:UniPoint(x:2, y:1)))
  

• 滑动过渡:此过渡将视图从左向右移动。或者我们可以说它在将视图移动到前缘时插入视图，并通过移出到后缘将其移除。

  transition(.slide)
  

• 非对称过渡:此过渡允许使用创建复合过渡，这意味着视图使用不同的过渡进行插入和移除。

  transition(.asymmetric(insertion:.slide, removal:.scale))
  

• 模糊和替换过渡:此过渡允许使用通过将模糊和缩放效果相互混合来为视图的开始和移除制作动画。

  transition(.blurReplace)
  

• 符号效果过渡:此过渡在插入和移除视图时对符号图像应用默认符号效果。它仅适用于符号图像。

  transition(.symbolEffect)
  

示例 1

在下面的 SwiftUI 程序中，我们将幻灯片过渡应用于文本视图。

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)
               // 在文本视图上应用幻灯片过渡
               .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)

               // 在形状视图上应用推送过渡
               // 这里的形状将从视图的顶部出现
               .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()
}

输出