第 33 章
使用 matchedGeometryEffect為 App 建立絢麗的視圖動畫
在 iOS 14 中，Apple 為 SwiftUI 框架引入了很多新功能，像是 LazyVGrid 以及 LazyHGrid。其中 matchedGeometryEffect 非常引人注目，這個功能讓開發者只需要幾行程式碼，就能夠創造絢麗的視圖動畫。SwiftUI 框架已經讓開發者可以簡單地使用動畫來呈現視圖的變化，而 matchedGeometryEffect 修飾器 (modifier) 更將視圖動畫 (view animations) 的實作提升到另一個境界。
對所有手機 App 來說，我們經常需要在多個視圖之間轉換，因此一個令人喜歡的視圖轉換絕對可以提昇整體的使用者體驗。有了 matchedGeometryEffect，你只需要描述兩個視圖的外觀，修飾器就會自動計算兩個視圖的差異，並且自動為大小和位置的變化加上動畫。
可能你會覺得十分困惑，但別擔心，介紹完整個範例 App 之後，你就會明白我在說什麼了。
想更深入學習SwiftUI和下載完整程式碼？你可以從AppCoda網站購買《精通 SwiftUI》完整電子版。
使用動畫轉換來交換兩個視圖
現在你應該對 matchedGeometryEffect 有了基礎的認識，讓我們繼續來看看它如何幫助我們建立一些絢麗的動畫。在這個範例中，我們會交換兩個圓形視圖的位置，並且套用修飾器來建立順暢的視圖轉換。
建立一個英雄動畫效果（Hero Animation）
除了從一種形狀轉換到另一種形狀之外，你還可以使用 matchedGeometryEffect 修改器來創建基本的英雄動畫。 給你一個例子，圖 33.8 顯示了一個圖像和一段文字的堆棧視圖。 點擊視圖時，圖像和文字都會展開以佔據全螢幕。 這種類型的動畫通常被稱為英雄動畫（Hero Animation）。
同樣地，我們可以應用 matchedGeometryEffect 技巧來創建這種類型的過場動畫。 如果參考圖 33.8，視圖轉換中有兩個視圖：
- 一個是顯示較小圖像和文章節錄的視圖。
- 另一個是擴展為全螢幕的視圖，顯示精選照片和全文。
想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。