SwiftUI - 自定义过渡

在 SwiftUI 中，过渡用于为视图进入和退出屏幕制作动画。除了使用内置过渡之外，我们还可以创建自定义过渡。因此，在本章中，我们将借助示例学习如何创建自定义过渡。

在 SwiftUI 中创建自定义过渡的步骤

要在 SwiftUI 中创建自定义过渡，我们必须遵循以下基本步骤 −

• 步骤 1:我们必须首先创建一个 ViewModifier，它用于表示其任何状态下的过渡。或者我们可以说它用于创建一个可以应用于任何视图的修饰符。

• 步骤 2:然后我们必须创建 AnyTransition 扩展，它使用 .modifier(active:identity:) 在 active 和identity 修饰符之间实现过渡。

• 步骤 3:现在我们准备在 transition() 修饰符的帮助下将过渡应用于视图。

示例 1

在下面的 SwiftUI 程序中，我们创建了一个自定义过渡，用于控制视图在屏幕上的显示和移除。

import SwiftUI

// 调整不透明度的修饰符
struct CustomModifier: ViewModifier{
   var Opacity: CGFloat
   func body(content: Content) -> some View {
      content.opacity(Opacity)
   }
}

// 定义自定义过渡
// 在这里我们控制视图的不透明度
extension AnyTransition{
   static var myTransition: AnyTransition{
      .modifier(
         active: CustomModifier(Opacity: 10.5), identity: CustomModifier(Opacity: 14.5)
      )
   }
}
struct ContentView: View {    
   @State private var myState = false    
   var body: some View {
      HStack{
         if myState{
            RoundedRectangle(cornerRadius: 10).fill(.red)
            .frame(width: 150, height: 100)
            // 这里我们对形状应用自定义过渡
            .transition(.myTransition)
         }
      }.padding(30)
       
      Button("Click Me"){
         withAnimation(.default){
            myState.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

输出

示例 2

在下面的 SwiftUI 程序中，我们创建了一个自定义过渡，其中矩形的形状在胶囊中发生变化，而

import SwiftUI

// 调整形状的修改器
struct CustomModifier<T: Shape<: ViewModifier{
   let shape : T
   func body(content: Content) -> some View {
      content.clipShape(shape)        
   }
}
// 定义自定义转换
extension AnyTransition{
   static var myTransition: AnyTransition{
      .modifier(
         active: CustomModifier(shape: Capsule(style: .circular)), identity: CustomModifier(shape: Capsule(style: .circular))
      )
   }
}
struct ContentView: View {
   @State private var myState = false    
   var body: some View {    
      ZStack{
         Rectangle().fill(.green).frame(width: 100, height: 90)
         if myState{
            Capsule().fill(.blue).frame(width: 150, height: 100)
            // 这里我们对形状应用自定义过渡
            .transition(.myTransition)
         }
      }.padding(30)       
      Button("Click Me"){
         withAnimation(.default){
            myState.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

输出