SwiftUI - 建立顯式動畫

顯式動畫允許我們明確定義如何在給定檢視上使用何種型別的動畫以及何時使用。它為開發者提供了手動控制權，以便他們能夠更好地控制動畫。使用顯式動畫，我們可以輕鬆地將兩個或多個動畫混合在一起，從而在簡單和複雜的檢視上建立新的效果。在 SwiftUI 中，我們可以使用 .withAnimation() 修飾符建立顯式動畫。

“.withAnimation()” 修飾符

“.withAnimation()” 修飾符用於在狀態更改時為給定檢視中存在的所有元件設定動畫。或者我們可以說，它會根據在 withAnimation() 程式碼塊中定義的狀態更改程式碼自動為給定檢視的過渡設定動畫。它允許我們根據需要手動控制動畫。

語法

以下是語法 -

func withAnimation<Result>(
   _animation: Animation? = .default,
   _body: () throws -> Result
)rethrows -> Result

示例 1

以下 SwiftUI 程式用於建立顯式動畫。在這裡，我們透過單擊按鈕來更改矩形的透明度。

import SwiftUI

struct ContentView: View {
   @State private var myOpacity = false
   var body: some View {
      Rectangle()
         .frame(width: 150, height: 100)
         .opacity(myOpacity ? 0.2 : 2)
      Button("Change Opacity"){
         withAnimation(.easeInOut(duration: 1.3)){
            myOpacity.toggle()
         }
      }.font(.largeTitle).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式用於線性執行卡車。

import SwiftUI

struct ContentView: View {
   @State private var run = false
   var body: some View {
      Image(systemName: "box.truck")
         .font(.largeTitle)
         .foregroundColor(.green)
         .offset(x: run ? 1400 : -140, y: 0)
      Button("Run The Truck"){
         withAnimation(.linear(duration: 0.9)){
            run.toggle()
         }
      }.font(.title2).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

輸出

隱式動畫與顯式動畫

眾所周知，在 SwiftUI 中，我們可以建立兩種不同型別的動畫：隱式動畫和顯式動畫。這兩種動畫都會為檢視設定動畫，但它們仍然存在一些差異，差異如下 -