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


本篇原文(標題:Cool Custom ViewController Transitions — Advanced)刊登於作者 Medium,由 Fran Obarrio 所著,並授權翻譯及轉載。

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

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

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

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

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

view-controller-demo

專案

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

  • 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:PushAnimator 和 PopAnimator 有一個 doBezierAnimation 方法,你可以設置其為 true 或 false,來查看 AvatarPlus ImageView QuadCurve 動畫的路徑
小提示 #2:當視圖控制器從 UINavigationController 的堆疊 (stack) 中 push 和 pop 時,UINavigationControllerDelegate 協定定義了 UINavigationController 可以實現的方法。

實現動畫的步驟

1. 正常狀態

viewcontroller-1

2.  Cells 淡出 + TableView Cell 縮小

viewcontroller-2

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

viewcontroller-3

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

viewcontroller-4

讓我們進入動畫控制器!

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

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

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

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

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

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

  • PushAnimator:

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

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

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

小提示 :在 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 原始碼。

本篇原文(標題:Cool Custom ViewController Transitions — Advanced)刊登於作者 Medium,由 Fran Obarrio 所著,並授權翻譯及轉載。

聯絡作者:Fran Obarrio,你可以透過 LinkedInTwitter、或 Email 聯絡他。

譯者簡介:Kelly Chan-AppCoda 編輯小姐。


此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。

blog comments powered by Disqus
Shares
Share This