SwiftUI - 自定义过渡动画

在 SwiftUI 中，过渡动画用于为视图从屏幕上进入和离开添加动画效果。除了使用内置的过渡动画外，我们还可以创建自定义的过渡动画。因此，在本章中，我们将学习如何借助示例创建自定义过渡动画。

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

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

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

• 步骤 2： 然后我们必须创建 AnyTransition 扩展，它使用 .modifier(active:identity:) 来获取活动修饰符和标识修饰符之间存在的过渡动画。

• 步骤 3： 现在，我们可以使用 transition() 修饰符将我们的过渡动画应用于视图。

示例 1

在下面的 SwiftUI 程序中，我们创建了一个自定义过渡动画，用于控制视图在屏幕上显示和隐藏时的外观。

import SwiftUI

// Modifer that adjust the opacity
struct CustomModifier: ViewModifier{
   var Opacity: CGFloat
   func body(content: Content) -> some View {
      content.opacity(Opacity)
   }
}

// Defining custom transition
// Here we control the opacity of the view
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)
            // Here we apply customize transition to the shape
            .transition(.myTransition)
         }
      }.padding(30)
       
      Button("Click Me"){
         withAnimation(.default){
            myState.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

输出

示例 2

在下面的 SwiftUI 程序中，我们创建了一个自定义过渡动画，其中矩形的形状在过渡过程中变为胶囊形。

import SwiftUI

// Modifer that adjusts the shape
struct CustomModifier<T: Shape<: ViewModifier{
   let shape : T
   func body(content: Content) -> some View {
      content.clipShape(shape)        
   }
}
// Defining custom transition
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)
            // Here we apply customize transition to the shape
            .transition(.myTransition)
         }
      }.padding(30)       
      Button("Click Me"){
         withAnimation(.default){
            myState.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

输出