SwiftUI - 建立動畫

---

---

動畫是建立具有吸引力的 SwiftUI 使用者介面的最強大的工具。它以各種方式為檢視新增動畫。在 SwiftUI 中，我們可以透過兩種方式建立動畫：隱式動畫和顯式動畫。隱式動畫是在檢視狀態發生變化時自動處理動畫的動畫，而顯式動畫則用於顯式建立動畫。因此，本章我們將學習如何隱式建立動畫。

`.animation()` 修飾符

在 SwiftUI 中，我們可以藉助 `.animation()` 修飾符來應用動畫。`.animation()` 修飾符用於將指定的動畫應用於給定的檢視，並且只要修飾符中指定的值發生變化，檢視就會進行動畫處理。這是一種隱式動畫。

語法

以下是語法：

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

引數

此方法接受以下引數：

animation: 表示我們要應用於檢視的動畫。如果此引數的值為 nil，則檢視不會進行動畫處理。此引數的值可以是以下值之一：

• default: 用於預設動畫。

• linear: 建立以恆定速度移動的動畫。

• easeIn: 建立一個動畫，該動畫開始緩慢，但當它到達運動結束時速度會加快。

• easeOut: 建立一個動畫，該動畫開始快速，但當它到達運動結束時速度會減慢。

• easeInOut: 建立一個具有 easeIn 和 easeOut 動畫特性的動畫。

• bouncy: 建立彈跳動畫。

• smooth: 建立無彈跳動畫。

• snappy: 建立快速動畫。

• spring: 建立彈簧動畫。

• interactiveSpring: 建立持續時間較短的彈簧動畫。

• interpolatingSpring: 建立一個彈簧動畫，該動畫使用阻尼彈簧模型來生成 1 到 0 之間的數值。

value: 表示將觸發動畫的值。

在 SwiftUI 中建立基本動畫

要建立基本動畫，請按照以下步驟操作：

步驟 1：建立一個新專案 - 要建立一個新專案，請開啟 Xcode，然後建立一個新的 SwiftUI 專案。

步驟 2：建立動畫 - 現在，藉助 `.animation()` 方法，我們將建立一個簡單的動畫。

示例

以下 SwiftUI 程式用於建立簡單的動畫。在這裡，當我們點選按鈕時，按鈕的大小會增加。

import SwiftUI

struct ContentView: View {
   @State private var size = 3.3
   var body: some View {
      Button("Click Me"){
         size += 3
      }.frame(width: 100, height: 200)
      .background(Circle().fill(.mint))
      .scaleEffect(size)
      .animation(.easeOut, value: size)
   }
}
#Preview {
   ContentView()
}

輸出

在 SwiftUI 中建立彈簧動畫

使用 `.animation()` 修飾符，我們還可以建立彈簧動畫。在這裡，我們將 spring() 方法傳遞給 `.animation()` 方法，因此檢視會像彈簧一樣進行動畫處理。

語法

以下是語法：

func spring(
   duration: TimeInterval = 0.5,
   bounce: Double = 0.0,
   blendDuration: Double = 0
) -> Animation

引數

此方法接受以下引數，使用這些引數我們可以控制彈簧動畫：

• duration: 定義彈簧的振盪週期。

• bounce: 定義彈簧的彈跳程度。這裡 0 表示無彈跳，正值表示彈性增加，負值表示過度阻尼彈簧。

• blendDuration: 定義插值變化的秒數。

示例

以下 SwiftUI 程式用於建立彈簧動畫。

import SwiftUI

struct ContentView: View {
   @State private var size = false
   var body: some View {
      VStack{
         Rectangle()
            .stroke(.blue)
            .frame(width: size ? 200 : 100, height: size ? 90 : 50)
            .animation(.spring(duration: 0.2, bounce: 0.1, blendDuration: 1), value: size)
         Button("Click to See Magic"){
            size.toggle()
         }.foregroundColor(.red)
      }
   }
}
#Preview {
   ContentView()
}

輸出

在 SwiftUI 中配置動畫

藉助以下方法，我們可以輕鬆配置動畫：

名稱	描述
delay()	它用於將動畫的開始延遲給定數量的秒數。
repeatCount()	它用於根據給定的次數重複指定的動畫。
repeatForever()	它用於無限重複指定的動畫。
speed()	它用於控制動畫的速度。