Color Diffusion Transition – 色彩擴散轉場動畫

先從一個簡單的轉場動畫開始,了解自定義轉場動畫的過程。


Color Diffusion Transition

第一個畫面背景是綠色的,中間有個紅色的箱子,當點下紅色的箱子以後,箱子會擴散出紅色至整個畫面。

第二個畫面背景是紅色的,中間有個綠色的箱子,當點下綠色的箱子以後,紅色的背景會縮到中間的箱子當中。


HomeViewController

點下箱子以後會去 present 第二個畫面,這裡比一般的 present 多了兩個設定,讓 ViewController 知道我們要自定義轉場動畫。

另外我們會告訴 diffusionTransition 我們要在哪一個 View 上做動畫(從那裡擴散和從那裡收縮)

這個畫面的例子就是中間的按鈕了。


SKDiffusionTransition

繼承於 NSObject, UIViewControllerAnimatedTransitioning

在這個方法中返回動畫的 duration

另外會實作 UIViewControllerTransitioningDelegate 中實現兩個方法。

通過改變自己定義的 isReverse 屬性,讓 SKDiffusionTransition 知道目前是要做 present 還是 dismiss 的動畫效果。

轉場動畫的實現

具體的轉場動畫內容都會在這個方法中實現


Reference

  • 可以在 Github 上看到本文相關的 Source Code

發表迴響

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