SwiftUI - 動畫

動畫是在檢視狀態發生變化時對螢幕上檢視進行動畫處理的過程。它可以透過視覺方式反映檢視的變化，從而建立有吸引力的使用者介面。因此，在本章中，我們將學習 SwiftUI 中動畫的基礎知識。

SwiftUI 中的動畫

SwiftUI 對動畫提供了良好的支援。藉助動畫，我們可以在檢視或元件或佈局的狀態發生變化時，輕鬆地在檢視中建立流暢的視覺過渡。由於 SwiftUI 的宣告式方法，我們可以根據檢視狀態的變化來動畫化大小、顏色、不透明度、位置等屬性。

在 SwiftUI 中，我們可以使用以下方法建立動畫 -

withAnimation(_:_:_) 方法： 用於建立基於狀態的動畫。它允許您指定動畫型別並在狀態變數更改其狀態時執行動畫。
animation(:value:) 方法： 用於將動畫插入到特定檢視中，這意味著當檢視的狀態被修改時，它會自動為指定的檢視設定動畫。

SwiftUI 中的動畫型別

SwiftUI 支援以下型別的動畫

隱式動畫：此動畫為檢視提供預定義的動畫。因此，每當狀態發生變化時，檢視都會進行動畫處理，它會自動工作，這意味著我們不需要為每個動畫幀指定。這種型別的動畫是透過使用 .animation() 方法實現的。
顯式動畫：它用於建立僅更改給定檢視中存在的指定屬性的動畫。我們可以藉助 withAnimation() 方法實現顯式動畫。它為我們提供了對動畫的更多控制。
動畫曲線：它提供各種型別的動畫曲線，例如 .easeIn、.easeOut、.easeInOut 和 .linear。它們通常用於控制動畫檢視的速度。
彈簧動畫：這是一種特殊的動畫型別，用於建立彈簧運動。
重複動畫：這是一種用於建立重複特定次數的動畫的動畫型別。
狀態驅動的動畫：眾所周知，在 SwiftUI 中，動畫由 @State 或其他動態屬性的變化觸發，因此每當狀態變數的值發生變化時，檢視的相應屬性將更新並且過渡將被動畫化。

使用動畫的好處

以下是使用動畫將獲得的一些關鍵好處 -

動畫透過建立更清晰、更具互動性的應用程式介面來增強應用程式的可用性。
動畫向用戶提供對他們操作的即時且清晰的響應，並減少任何混淆。
應用程式中精心設計的動畫可以增強使用者參與度。
動畫可以幫助開發人員將更多注意力放在應用程式的重要部分上。
動畫在狀態之間移動時提供更流暢的過渡效果。

SwiftUI 中的巢狀動畫

SwiftUI 透過 withAnimation() 方法支援巢狀動畫。使用它，我們可以將多個動畫應用於一個檢視。我們還可以透過巢狀兩個或多個動畫來建立特殊效果。

語法

以下是語法 -

func animation<V>(_animation:Animation?,
    value: V) -> some View where V : Equatable

示例

以下 SwiftUI 程式用於建立巢狀動畫。此處，外部 withAnimation() 負責圓形的縮放，內部 withAnimation() 負責顏色的變化。

import SwiftUI

struct ContentView: View {
   @State private var scale = false
   @State private var color = false

   var body: some View {
      VStack{
         Circle()
            .stroke(color ? Color.blue: Color.red, lineWidth: 6)
            .frame(width: 160)
            .scaleEffect(scale ? 1.7 : 1.1)
            .padding(10)
         Button("Click"){
            withAnimation(.easeInOut(duration: 8.0)){
               scale.toggle()
               withAnimation(.easeInOut(duration: 1.1)){
                  color.toggle()
               }
            }
         }.font(.title2)
      }
   }
}

#Preview {
   ContentView()
}

輸出

SwiftUI 中的定時曲線

定時曲線用於使用不同的定時階段（例如開始、中間和結束）來自定義動畫的速度。它允許我們控制動畫如何在螢幕上移動。為了控制動畫的速度，SwiftUI 提供了一個名為 timingCurve() 的內建修飾符。timingCurve() 修飾符根據給定的點對建立的動畫進行動畫處理。

語法

以下是語法 -

static func timingCurve(
   _ p1x: Double,
   _ p1y: Double,
   _ p2x: Double,
   _ p2y: Double,
   duration: TimeInterval = 0.35
) -> Animation

引數

以下是引數 -

p1x：表示曲線的控制點的第一個 x 座標。
p1y：表示曲線的控制點的第一個 y 座標。
p1x：表示曲線的控制點的第二個 x 座標。
p1y：表示曲線的控制點的第二個 y 座標。
duration：表示動畫的持續時間（以秒為單位）。

示例

在以下 SwiftUI 程式中，我們將根據自定義定時曲線對圓形進行動畫處理。

import SwiftUI
struct ContentView: View {
   @State private var move = false
   
   var body: some View {
      VStack{
         Circle()
            .stroke(.red, lineWidth: 6)
            .frame(width: 160)
            .offset(x : move ? 160 : -130)
            .animation(.timingCurve(0.67, -0.54, 0.28, 1.34, duration: 2), value: move)
         Button("Click"){
            move.toggle()
         }.font(.title2)
      }
   }
}
#Preview {
   ContentView()
}

輸出

列印頁面