ViewController 轉場進階指南：進一步創建絢麗的轉場動畫

今天，我們會客製由一個視圖控制器 (ViewController) 轉場到另一個的轉場動畫。

為什麼會想要寫這個主題呢？過去，我花了很多時間去了解視圖控制器之間的轉換。遺憾的是，目前線上鮮有能簡單說明視圖控制器動畫轉場的教程。

因此，我決定寫幾篇文章，教大家用最簡單的方法，創建令人驚艷的轉場動畫。而這篇文章會比前一篇更進階。

讓我們開始來創建客製化的 UINavigationController 轉場動畫吧！

先看一下我們最後的成果：

專案

讓我們先花點時間來了解這個專案和以下元素：

• MainViewController.swift：主視圖控制器，你會在這裡看到 fadeIN 或 fadeOut 單元格的方法。
• MainViewController+DataSource.swift：我們在這檔案放置 TableView DataSource 方法。
• MainViewController+ProtocolTransitions.swift：在這裡，我們可以看到要製作動畫的每個物件的協定 (Protocol)。
• PushedViewController.swift：專案中的第二個視圖控制器，它就是動畫的最終狀態。
• AnimationCollectionViewLayout.swift：這是用在 MainViewController CollectionView 的 CollectionView Layout。
• MainTableViewCell.swift：這是我們將在專案的 MainViewController 上使用的 MainTableViewCell。
• Helpers.swift：我們會在這裡定義在 MainViewController 和 PushedViewController 上使用的協定，以獲取要進行動畫處理的物件的引用。
• PushAnimator.swift: 此類別將繼承自 NSObject，並將實作 UIViewControllerAnimatedTransitioning 協定，以從 MainViewController 轉換到 PushedViewController。
• PopAnimator.swift: 此類別將繼承自 NSObject ，並將實作 UIViewControllerAnimatedTransitioning 協定，以從 PushedViewController 轉換到 MainViewController。
• TransitionCoordinator.swift: 此類別將繼承自 NSObject，並將實作 UINavigationControllerDelegate 協定。 在此類別中，我們定義 push 時使用 PushAnimator 的轉場，以及在 pop 時使用的 PopAnimator 轉場效果。

實現動畫的步驟

1. 正常狀態

2.  Cells 淡出 + TableView Cell 縮小

3. Avatar 和 Plus ImageView 利用一個 QuadCurve Animation 執行動畫。其他物件則執行線性動畫 (Linear Animation).

4. 最終動畫：Background 擴展至與容器視圖同寬，高度為螢幕的一半，而帶有標籤的 Avatar 和 Plus Image 也會同時擴展。

讓我們進入動畫控制器！

在這邊，我們將提供 2 個客製化的轉場動畫：一個用來 push，一個用在 pop。現在讓我們專注在 push 動畫，首先，我們需要準備什麼？

一個動畫控制器 (Animation Controller) !

該控制器需要實作下列兩種方法，以符合 UIViewControllerAnimatedTransitioning() 協定。

1. transitionDuration：整個動畫的持續時間

2. animateTransition(using:)： 這是動畫邏輯所在

讓我們開始第一個動畫吧。

• PushAnimator：

在轉場期間，我們需要提供一個容器視圖 (container view)，讓轉場動畫在裡面運行。

• 以下是需要添加到控制器視圖的 transitionContext 視圖：

我們將會新增一個協定，用來獲取要執行動畫的視圖單元格的參考。該協定可用於 MainViewController 和 PushedViewController。

所以 ⋯⋯ 我們要如何透過動畫使物件從一個視圖控制器移動到另一個呢？我們需要創建每個視圖／物件，將它們添加到容器視圖中，並設置動畫。

來看一下如何實作程式碼吧：

來到這一步，我們得到：

1. ImageView
   • Plus Image View
   • Profile Image View（也就是 Avatar）
   • Background
   • Like（讚好鍵）
   • Play（播放鍵）
   • Cancel（取消鍵）
2. View
   • Background
3. Label（標籤）
   • Title（標題）
   • Album（專輯）
   • Year（年份）

PushAnimator 的完整動畫：

以下是動畫的簡要說明：

Animator 1：製作單元格與標題縮小的動畫。

Animator 2：我們對頂部進行動畫處理，將單元格擴展到主視圖的寬度，並對標籤和 Cancel、Like、Play ImageView 進行動畫處理。

doBezierAnimation：Avatar 和 Plus ImageView 的 Bezier 和 QuadCurve 動畫。

而 Pop animator 的製作方法是一樣的，只是順序相反。我們只需要對 QuadCurve 作出改動，讓動畫更加流暢。因為程式碼幾乎一樣，所以我們不會深入探討。

來到這一步，我們已經製作好所需的一切了，只需要在兩個視圖控制器之間添加 TransitionCoordinator。

請在 MainViewController 添加以下程式碼：

let transition = TransitionCoordinator()

當單元格被點擊後，我們會將這個 transition 物件添加到 NavigationController delegate 中，執行「淡出」動畫，並將 ViewController 推到 PushedViewController。

讓我們看一下 TransitionCoordinator 的程式碼：

此類別設置 NavigationController delegate，並檢查我們正在執行哪種類型的操作：如果正在執行 push，它就會回傳一個 PushAnimator() 物件；而如果是 pop，它就會回傳一個 PopAnimator() 物件。

總結

這個轉場效果剛開始接觸可能有點困難，但請相信我，這實作起來很簡單！ 希望你喜歡這篇文章！

如果你有任何評論、問題或建議，請隨時在下面留言！

你可以在這裡下載 Github 原始碼。