Transitions – UIView Transition (視圖轉場動畫)

其實 iOS 原生有提供一些設計好的轉場動畫,比如簡單的翻轉效果,這次把原生的轉場效果都看一次。


Transitions

共有七種 UIView Transition 效果,底下 0~6 是用來切換效果的,點下按鈕 GO 的時候就會執行動畫。


ContainerView

通過 setupView 我們建立 containerView / owlImageView / catImageView 並設定他們的樣式(比如圓角)

然後將 containerView 放在 ViewController 的 view 上,將 owlImageView 放在 containerView 上。

而 catImageView 並沒有成為其他 View 的 SubView 而是後面做轉場動畫的時候會被替換。


Transition

先判斷 segment 所選中的項目來選擇 UIViewAnimationOptions 然後通過 UIView.transition 來做轉場動畫。

這裡比較有趣的地方是,如果我們今天沒有 containerView 而是將內容都放在 ViewController 的 view 上,動畫效果就會很不一樣。

視覺上看起來有些動畫會帶動父視圖一起做,可以回到上面看這次的效果影片,會發現雖然是對 owlImageView 與 catImageView 切換做視圖轉場動畫,

但是 containerView 也一起跟著做動畫了。


Reference

發表迴響

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

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料