Swift實現TableView展開畫面的轉場動畫

App中使用適當的動畫效果可以提高使用者體驗,最近在研究幾種常見的轉場動畫(View Controller Transition),今天想來分享一下這種「展開式」的轉場動畫是如何實現的。


展開式轉場動畫

在iOS 7 之後開始支持Custom Transition,以上面這張GIF為例,其中包含了兩種轉場動畫。

  • 當使用者點開其中一張圖片的時候,就會將畫面進行上下分離並且平移的動畫(此時做的是navigation push的動作)。
  • 當使用者點了返回按鈕,會將原先分離的上下部份進行合併的動畫(此時做的是navigation pop的動作)。

接下來分享下具體實現的方法。


兩個畫面

  • HomeViewController,內容為多張圖片組成的TableView
  • DetailViewController,以一張大圖填滿畫面。

當我們在Home點了某一個Cell,就會跳到Detail中並且顯示這張圖。


設定自定義轉場動畫

我們建立了一個名稱為SKExpandTransition的class,該class會去實現Protocol UIViewControllerAnimatedTransitioning中規定的兩個方法

在HomeViewController中實現UINavigationControllerDelegate中的一個方法,我們可以在Navigation進行push或者pop的時候,提交自己的transition方法。


動畫實現的主要部分

其實push過去和pop回來的動畫邏輯是類似的,我們的目標就是如何去抓取上下分離的部分,然後做一個平移的動畫。

我們先來抓取上下兩個部份的圖:

接著通過UIAnimation來實現上下圖的平移動畫

 

在進行push的時候,我們就會將截圖後的內容存起來(imageViewTop, imageViewBottom)

這樣在進行pop的時候,就可以直接拿這兩張圖來做還原的動畫(從上下外圍向中心移動)


進一步的閱讀:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *