第 23 章
視圖控制器轉場以及動畫

倘若你能夠在不同的視圖控制器間,定義轉場(transition)的樣式是不是很不錯呢?Apple 為視圖控制器間轉場提供了幾個預設的動畫型態。一般是使用向上滑動的動畫,將視圖控制器以強制回應(Modal)的形式呈現。在導覽控制器中,兩個視圖控制器間的轉場也預設好了,從導覽控制器的堆疊(stack)中推出(pushing)或彈出是一種標準的滑動動畫(popping)。在舊的 iOS 版本,沒有辦法在兩個不同視圖控制器間作轉場。iOS 開發者可以透過 View Controller Transitioning API 實作自己的轉場方式。這個 API 能夠讓你自行定義從一個視圖控制器切換到另一個視圖控制器的呈現方式。

有兩個視圖控制器的轉場型態:互動(interactive)與非互動(non-interactive)。在 iOS 中,你可以從導覽控制器的堆疊中,從畫面的最左邊平移並拖曳目前的視圖至視圖控制器的右邊來彈跳出一個視圖控制器。這是互動轉場最棒的例子。在本章,我們將重點放在非互動的轉場,因為這會比較容易理解。

自訂轉場的觀念非常簡單。要先建立一個動畫物件(animator object),或者稱為轉場管理者(transition manager),用來實作自訂的轉場。這個動畫物件在視圖控制器準備開始要呈現或轉場時,由 UIKit 框架所呼叫,之後便開始執行動畫,並在轉場完成後通知框架。

當實作非互動視圖控制器轉場時,基本上需要處理以下的協定:

  • UIViewControllerAnimatedTransitioning - 你的動畫物件必須採用這個協定,以建立一個讓視圖控制器開始或離開畫面的轉場動畫。
  • UIViewControllerTransitioningDelegate - 採用這個協定決定用來顯示或解除視圖控制器的動畫物件。有趣的是,你可以提供不同的動畫物件來處理兩個控制器間的轉場。
  • UIViewControllerContextTransitioning -這個協定提供了視圖控制器間轉場動畫內容資訊(context information)存取的方法。你不需要在自己的類別採用這個資訊。你的動畫物件在轉場過程中會收到由系統所提供的內容物件(context object)。

看起來好像有點複雜?實際不然。當你透過這個簡單的專案,你將會對如何在視圖控制器間自訂轉場更有概念。

轉場動畫範例

我們準備建立一個簡單的範例 App。為了將重點放在動畫的建立,你可以至 http://www.appcoda.com/resources/swift55/NavTransitionStarter.zip下載完整的專案。這個模板預建了Storyboard與視圖控制器類別。此使用者介面使用集合視圖來建立。倘若你沒有任何 UICollectionView 的經驗,請閱讀一下本書的第 18 章與第 20 章。

倘若你有試著執行程式一下,你會得到如下圖所示的畫面。

圖 23.1. 範例 App
圖 23.1. 範例 App

每一個圖示表示一種客製的轉場形式。現在這些圖示還沒有功能,接下來你將學會如何使用 View Controller Transitioning API 來實作各種轉場形式。


本文摘自《iOS 17 App程式設計進階攻略》一書。如果你想繼續閱讀和下載完整程式碼,你可以從AppCoda網站購買完整電子版,全書範例檔皆可下載。

results matching ""

    No results matching ""