Swift 自訂轉場動畫,手勢(上)

 -  -  13253


Demo GIF


本篇主要講述動畫的實作,手勢的部分留在下篇

動畫的原理是使用 maskView 畫出一個圓,然後對圓進行放大縮小

這邊使用 maskView 的原因是:在背景比較複雜的情況下(非純色),變化的效果會比較清晰,比較符合個人的喜好(?

那在開始前先看一下,在 iOS 中是如何實現自訂的轉場動畫

看上圖可以發現,由A到B,似乎不是我們一般在手機中看到的,移動B畫面。
而是在中間一個 Container View 中實作動畫,當動畫完成的時候,Containter View 中看到的畫面會跟B畫面完全一致,這樣在把 Container View 移除,就可以神不知鬼不覺的,達到一種,B畫面在移動的錯覺

開始!

首先我們先建立一個 class 用來管理我們 present & dismiss 的動畫要透過誰來動

UIViewControllerTransitioningDelegate 進去看,可以發現裡面有五個 func 都是 optional,是這樣的,如果不實作,那系統將會使用原生的效果來顯示。

我在網路上查的多數範例,是直接在 class CustomTransition 實作這個 protocol 然後 return self,但為了讓 code 看起來簡單一點,我選擇另外建立兩個 class confirm 這個 protocol

Present

接著我們在 func animateTransition 裡面實作我的們想要的動畫效果啦


反之,Dismiss 如下


萬事俱備,只欠東風

東西都建立好啦,接著就是如何使用了
我們在A畫面建立 CustomTransition,然後將B畫面的 transitioningDelegate 改為 CustomTransition,
並將 modalPresentationStyle 設置為 .custom

13 recommended
comments icon 0 comments

發表迴響

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