第 9 章
基礎動畫與轉場
你曾在 Keynote 使用過瞬間移動動畫（ magic move animation ）嗎？藉由瞬間移動效果， 你可以輕鬆建立投影片間的平滑動畫（ slick animation ）。Keynote 會自動分析兩張投影片之間的物件，並自動渲染動畫。同樣，SwiftUI 也將瞬間移動動畫帶入應用程式開發中， 使用該框架的動畫是自動且神奇的。當你定義一個視圖的兩個狀態，SwiftUI 會找出其餘的狀態，接著以動畫呈現兩個狀態之間的變化。
SwiftUI 使你能夠為單個視圖的變化以及兩個視圖之間的轉場來設定動畫。SwiftUI 框架具有許多的內建動畫，可建立不同的效果。
隱式動畫與顯式動畫
SwiftUI 提供兩種動畫類型：隱式（ implicit ）與顯式（ explicit ）。這兩個方式可以讓你為視圖及視圖轉場設定動畫。為了實作隱式動畫，SwiftUI 框架提供一個名為 animation 的修飾器，你把這個修飾器加到要設定動畫的視圖上，並指定喜歡的動畫類型。或者，你可以定義動畫的持續時間與延遲時間，SwiftUI 會根據視圖的狀態變化來自動渲染動畫。
顯式動畫對你要顯示的動畫提供更具侷限性的控制，其並非將修飾器加到視圖，而是在 withAnimation() 區塊中，告訴 SwiftUI 若有什麼的狀態變化時，要繪製動畫。
仍是覺得有些困惑嗎？沒有關係，藉由幾個範例，你就會更有概念了。
隱式動畫
我們從隱式動畫來開始介紹，我建議你建立一個新專案來看動畫的實際效果。你可以任意為專案命名，而我將它命名為 SwiftUIAnimation。
我們來看圖 9.1，這是一個簡單的可點擊視圖，由紅色圓形與心形所組成。當使用者點擊心形或圓形時，圓形的顏色會變成淡灰色，而心形則會變成紅色，同時心形圖示的大小也變得較大。因此，以下是其狀態變化：
- 圓的顏色會從紅色變成淡灰色。
- 心形圖示的顏色會從白色變成紅色。
- 心形圖示會比原來的大小大兩倍。
如果你使用SwiftUI 來實作可點擊的圓形，以下為程式內容，你可以建立一個 Xcode 的新專案，並將程式插入至 ContentView.swift 來測試看看：
想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。