#09 利用 4 種 Transition Style 和多種 Presentation 製作轉場動畫

Cover Vertical / Flip Horizontal / Cross Dissolve / Partial Curl

Photo by Damon Hall on Unsplash

在執行本文提到的兩種方法前，要先在左邊的 View Controller 做出一個按鈕，再拉一個新的 View Controller，裡面放上 Image View 和啤酒照片。

夏天到了，喝杯冰涼啤酒吧！

法一：用 segue 轉場

從按鈕按住右鍵拉 segue 到右邊的 View Controller，再選擇 Show。

從按鈕按住右鍵拉 segue 到右邊的 View Controller，再選擇 Show。

此時在按鈕點選右鍵後的畫面長這樣。可看到 Triggered Segues 裡的 action 連到了 View Controller Show。

Triggered Segues 裡的 action 連到了 View Controller Show。

再從右邊 controller 的 Attribute Inspector 挑選 Transition Style 和 Presentation，如下所述。

• Cover Vertical：新頁面由下而上出現。

Cover Vertical

• Flip Horizontal：水平翻轉。

Flip Horizontal

• Cross Dissolve：淡入淡出。

Cross Dissolve

• Partial Curl：翻頁效果。

Partial Curl

法二：用程式轉場

前置步驟：

1. 建立一個新的 Cocoa Touch Class 並取名為 BeerViewController。內容都不用動。（因為我們已經用 Storyboard 做完畫面了）

2. 為了把步驟 1 建立的 BeerViewController.swift 與利用 Storyboard 拉出的 controller「連結」起來，必須在 Storyboard 下，把右邊 View Controller 的 Class 一樣設為 BeerViewController ，Storyboard ID 則設為自訂的 Beer。

1. 建立一個新的 Cocoa Touch Class 並取名為 BeerViewController。內容都不用動。

2. 在 Storyboard 下，把右邊 View Controller 的 Class 一樣設為 BeerViewController ，Storyboard ID 則設為自訂的 Beer。

完成前置步驟後，在 ViewController.swift 下加入以下程式碼。

回到 Storyboard ，點按 View Controller 圖示右鍵，把 Received Actions 的showBeer旁的圈圈拉到按鈕上面，再選擇 Touch Up Inside。把showBeer函式跟按鈕執行的動作做連結。

最後，執行模擬會根據我們設置的 Transition Style 和 Presentation 決定要呈現哪種動畫。

寫程式加入 Transition Style 和 Presentation

呈上，再利用 modalTransitionStyle和modalPresentationStyle可加入不同 Transition Style 和 Presentation。

用程式寫 Transition Style 和 Presentation

參考資料

利用 transition style 控制轉場動畫

利用程式連接兩個 View Controller：

加入 Transition Style 和 Presentation：

用純程式碼寫轉場動畫

圓角按鈕的圖形操作介面：

使用 IBDesignable 與 IBInspectable 製作更美觀的 UI 元件