第 9 章
基礎動畫與轉場

你曾在 Keynote 使用過瞬間移動動畫（ magic move animation ）嗎？藉由瞬間移動效果， 你可以輕鬆建立投影片間的平滑動畫（ slick animation ）。Keynote 會自動分析兩張投影片之間的物件，並自動渲染動畫。同樣，SwiftUI 也將瞬間移動動畫帶入應用程式開發中， 使用該框架的動畫是自動且神奇的。當你定義一個視圖的兩個狀態，SwiftUI 會找出其餘的狀態，接著以動畫呈現兩個狀態之間的變化。

SwiftUI 使你能夠為單個視圖的變化以及兩個視圖之間的轉場來設定動畫。SwiftUI 框架具有許多的內建動畫，可建立不同的效果。

想更深入學習SwiftUI和下載完整程式碼？你可以從AppCoda網站購買《精通 SwiftUI》完整電子版。

使用RotationEffect 建立下載指示器

SwiftUI 動畫的強大之處在於，你不需關心如何對視圖設定動畫，你只需要提供起始與結束狀態，接著 SwiftUI 會找出其餘的狀態。當你具備了這個觀念，即可以建立各種類型的動畫。

想更深入學習SwiftUI和下載完整程式碼？你可以從AppCoda網站購買《精通 SwiftUI》完整電子版。

當你使用此技術，就可以調整設計並開發各種版本的下載指示器。舉例而言，你可以將圓弧疊在圓環上，以建立精美的下載指示器，如圖 9.4 所示。

下載指示器不需要為圓形，你也可以使用 Rectangle 或 RoundedRectangle 來建立該指示器。不過，無需更改旋轉角度，你可以修改位移值（offset value）來建立如圖 9.5 所示的動畫。

建立進度指示器

下載指示器向使用者提供一些回饋，其表示 App 正在處理某些事情。不過，它並沒有顯示實際進度，如果你需要為使用者提供關於任務進度的更多資訊，則可能需要建立一個如圖 9.7 所示的進度指示器。

想更深入學習SwiftUI和下載完整程式碼？你可以從AppCoda網站購買《精通 SwiftUI》完整電子版。

延遲動畫

SwiftUI 框架不只讓你可以控制動畫的持續時間，你可以透過 delay 函數來延遲動畫， 如下所示：

Animation.default.delay(1.0)

這會將動畫延遲1 秒後開始。delay 函數也適用其他動畫。

透過混合搭配持續時間值與延遲時間值，你可以實作出一些有趣的動畫，如圖 9.8 所示的圓點下載指示器。

將矩形變形為圓形

有時，你可能需要將一個形狀（例如：矩形）流暢地變形為另一個形狀（例如：圓形）。這該如何實作呢？使用內建的形狀與動畫，你可以輕鬆建立如圖 9.9 所示的變形。

想更深入學習SwiftUI和下載完整程式碼？你可以從AppCoda網站購買《精通 SwiftUI》完整電子版。

了解轉場

到目前為止，我們已經討論了對視圖層次（view hierarchy ）中已存在的視圖設定動畫。我們建立動畫來放大和縮小視圖，或者對視圖大小設定動畫。

SwiftUI 讓開發者不只是做出前述的動畫，你可以定義如何從視圖層次中插入或移除視圖，而在 SwiftUI 中，這就是所謂的「轉場」（ transition ）。框架預設是使用淡入（ fade in ）與淡出（ fade out ）轉場。不過它內建了幾個現成的轉場效果，如滑動（ slide ）、移動（ move）、不透明度（opacity ）等。當然，你可以開發自己的轉場效果，也可以簡單的混合搭配各種類型的轉場，以建立所需的轉場效果。

想更深入學習SwiftUI和下載完整程式碼？你可以從AppCoda網站購買《精通 SwiftUI》完整電子版。

作業 #1: 使用動畫與轉場建立精美按鈕

現在，你應該具備了轉場與動畫的概念，我們來挑戰建立一個精美的按鈕，以顯示目前操作狀態。請輸入下列網址：https://www.appcoda.com/wp-content/uploads/2019/10/swiftui-animation-16.gif，來看一下效果。

這個按鈕有三種狀態：

• 原始狀態：以綠色顯示「Submit」按鈕。
• 處理狀態：顯示一個旋轉的圓環，並更新其標籤為「Processing」。
• 完成狀態：以紅色顯示「Done」按鈕。

這是一個非常具挑戰性的專案，它將測試你對 SwiftUI 動畫與轉場的了解。你將需要結合到目前為止所學的知識來制定解決方案。

作業 #2: 視圖轉場動畫

你已經學會了如何實作視圖轉場，試著結合在第 5 章中建立的卡片視圖專案，並建立如下所示的視圖轉場。當使用者點擊卡片時，目前的視圖將縮小並淡出，下一個視圖將以放大動畫顯示在前面。

如果你不懂上述的動畫， 則可以輸入網址： https://www.appcoda.com/wp-content/uploads/2019/10/swiftui-view-animation.gif，來看一下動畫效果。

本章小結

動畫在行動 UI 設計中扮演著一個特殊的角色，精心設計的動畫可改善使用者體驗，並讓 UI 的互動具有意義。兩個視圖之間流暢輕快的轉場，將讓使用者滿意且印象深刻。在 App Store 上有超過 200 萬支 App，要使你的 App 脫穎而出，並不容易，不過精心設計的 UI 與動畫肯定會產生根本的差別。

想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。