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

輸出