自定義控制器轉場
自定義控制器轉場包括 Push 轉場、Tabs 切換轉場和 Modal 轉場，在日常的專案開發中都十分常用，而這些轉場動畫通常是具有通用性的，所以我在專案開發中採用建立轉場代理類來實現。
下面以 Push 為例說明，其他轉場型別同理：
1. 建立轉場代理類 CustomTransitionDelegate，繼承 NSObject
2. 繼承 UINavigationControllerDelegate 協議並實現下面的協議方法
// 返回處理 push/pop 轉場動畫物件，就是對應上面那個表格的代理方法
func navigationController(
_ navigationController: UINavigationController,
animationControllerFor operation: UINavigationControllerOperation,
from fromVC: UIViewController,
to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?
複製程式碼3. 繼承 UIViewControllerAnimatedTransitioning 協議並實現下面的協議方法
// 返回轉場動畫時間
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval
// 執行動畫呼叫
func animateTransition(using transitionContext: UIViewControllerContextTransitioning)
複製程式碼4.【重要】必須在你自定義轉場動畫結束時呼叫 UIViewControllerContextTransitioning 上下文物件轉場完成
transitionContext.completeTransition(true)
複製程式碼5. 控制器屬性持有該轉場代理類物件
class ViewController: UIViewController {
// 自定義的轉場代理
fileprivate var customTransitionDelegate = CustomTransitionDelegate()
}
複製程式碼6. 控制器轉場時設定該代理物件（不同情況）
// UITabBarController + Tab
self.tabBarController?.delegate = customTransitionDelegate
複製程式碼// UINavigationController + Push
func pushWithCustomTransition() {
guard let navigationController = self.navigationController else { return }
let pushVc = PushViewController()
navigationController.delegate = customTransitionDelegate
navigationController.pushViewController(pushVc, animated: true)
}
複製程式碼// UIViewController + Modal
func presentWithCustomTransition() {
let modalController = ModalViewController()
modalController.transitioningDelegate = customTransitionDelegate
self.transitioningDelegate = customTransitionDelegate
self.present(modalController, animated: true, completion: nil)
}
複製程式碼以下是我實現的具體3種自定義控制器轉場代理類例子，分別執行3種動畫：漸變、卡片彈出、點擴散，其中漸變轉場代理類實現了3種型別轉場，其他2個只實現了 Modal 型別轉場
漸變轉場代理類
class AlphaTransitionDelegate: NSObject, UIViewControllerAnimatedTransitioning {
// 自定義屬性，判斷是出現還是消失
fileprivate var isAppear: Bool = true
/// UIViewControllerTransitioningDelegate 代理方法，返回轉場動畫時間
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
if self.isAppear {
return 0.45
} else {
return 0.40
}
}
/// UIViewControllerTransitioningDelegate 代理方法，處理轉場執行動畫
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
if self.isAppear {
animateTransitionForAppear(using: transitionContext)
} else {
animateTransitionForDisappear(using: transitionContext)
}
}
/// 自定義方法，處理出現的轉場動畫
fileprivate func animateTransitionForAppear(using transitionContext: UIViewControllerContextTransitioning) {
guard let fromViewController = transitionContext.viewController(forKey: .from) else { return }
guard let toViewController = transitionContext.viewController(forKey: .to) else { return }
guard let fromView = fromViewController.view, let toView = toViewController.view else { return }
let duration = self.transitionDuration(using: transitionContext)
let containerView = transitionContext.containerView
containerView.addSubview(fromView)
containerView.addSubview(toView)
// 漸變動畫
toView.alpha = 0
UIView.animate(withDuration: duration, delay: 0, options: .curveEaseOut, animations: {
toView.alpha = 1.0
}, completion: { (_) in
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})
}
/// 自定義方法，處理消失的轉場動畫
fileprivate func animateTransitionForDisappear(using transitionContext: UIViewControllerContextTransitioning) {
guard let fromViewController = transitionContext.viewController(forKey: .from) else { return }
guard let toViewController = transitionContext.viewController(forKey: .to) else { return }
guard let fromView = fromViewController.view, let toView = toViewController.view else { return }
let duration = self.transitionDuration(using: transitionContext)
let containerView = transitionContext.containerView
containerView.insertSubview(toView, at: 0)
// 漸變動畫
fromView.alpha = 1.0
UIView.animate(withDuration: duration, delay: 0, options: .curveEaseOut, animations: {
fromView.alpha = 0
}, completion: { (_) in
fromView.removeFromSuperview()
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})
}
}
// MARK: - UITabBarControllerDelegate 分頁轉場代理
extension AlphaTransitionDelegate: UITabBarControllerDelegate {
/// 返回處理 tabs 轉場動畫的物件
func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
isAppear = true
return self
}
}
// MARK: - UINavigationControllerDelegate 導航轉場代理
extension AlphaTransitionDelegate: UINavigationControllerDelegate {
/// 返回處理 push/pop 轉場動畫的物件
func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
switch operation {
case .push:
isAppear = true
case .pop:
isAppear = false
default:
return nil
}
return self
}
}
// MARK: - UIViewControllerTransitioningDelegate 彈出轉場代理
extension AlphaTransitionDelegate: UIViewControllerTransitioningDelegate {
/// 返回處理 present 轉場動畫的物件
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
// presented 被彈出的控制器，presenting 根控制器，source 源控制器
self.isAppear = true
return self
}
/// 返回處理 dismiss 轉場動畫的物件
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
self.isAppear = false
return self
}
}
複製程式碼卡片轉場代理類
class CardTransitionDelegate: NSObject, UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning {
// 自定義屬性，判斷是 present 還是 dismiss
fileprivate var isPresent: Bool = true
fileprivate weak var maskBackgroundView: UIView?
fileprivate weak var source: UIViewController?
fileprivate weak var presented: UIViewController?
// 動畫卡片距離頂部的距離
fileprivate var topForShow: CGFloat = 40
init(topForShow: CGFloat) {
super.init()
self.topForShow = topForShow
}
/// 代理方法，返回處理 present 轉場動畫的物件
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
// presented - 被彈出控制器，presenting - 根控制器(Navigation/Tab/View)，source - 源控制器
// 因為使用了 overFullScreen，source 不會呼叫 viewWillDisappear 和 viewDidDisappear，這裡手動觸發
source.viewWillDisappear(false)
source.viewDidDisappear(false)
self.source = source
self.presented = presented
self.isPresent = true
return self
}
/// 代理方法，返回處理 dismiss 轉場動畫的物件
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
self.isPresent = false
return self
}
/// 代理方法，返回 present 或者 dismiss 的轉場時間
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
if self.isPresent { // present
return 0.45
} else { // dismiss
return 0.45
}
}
/// 代理方法，處理 present 或者 dismiss 的轉場，這裡分離出 2 個子方法分別處理 present 和 dismiss
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
if self.isPresent { // present
animateTransitionForPresent(using: transitionContext)
} else { // dismiss
animateTransitionForDismiss(using: transitionContext)
}
}
/// 自定義方法，處理 present 轉場
fileprivate func animateTransitionForPresent(using transitionContext: UIViewControllerContextTransitioning) {
guard let fromViewController = transitionContext.viewController(forKey: .from) else { return }
guard let toViewController = transitionContext.viewController(forKey: .to) else { return }
guard let fromView = fromViewController.view, let toView = toViewController.view else { return }
let duration = self.transitionDuration(using: transitionContext)
let containerView = transitionContext.containerView
containerView.addSubview(fromView)
// 灰色背景控制元件
let maskBackgroundView = UIView(frame: containerView.bounds)
maskBackgroundView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
maskBackgroundView.alpha = 0.0
maskBackgroundView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(CardTransitionDelegate.clickMaskViewAction(_:))))
self.maskBackgroundView = maskBackgroundView
fromView.addSubview(maskBackgroundView)
containerView.addSubview(toView)
// 動畫開始，底層控制器往後縮小，灰色背景漸變出現，頂層控制器從下往上出現
let tranformScale = (UIScreen.main.bounds.height - self.topForShow) / UIScreen.main.bounds.height
let tranform = CGAffineTransform(scaleX: tranformScale, y: tranformScale)
toView.frame.origin.y = UIScreen.main.bounds.height
UIView.animate(withDuration: duration, delay: 0, options: .curveEaseOut, animations: {
toView.frame.origin.y = self.topForShow
maskBackgroundView.alpha = 1.0
fromView.transform = tranform
}, completion: { (_) in
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})
}
/// 自定義方法，處理 dismiss 轉場
fileprivate func animateTransitionForDismiss(using transitionContext: UIViewControllerContextTransitioning) {
guard let fromViewController = transitionContext.viewController(forKey: .from) else { return }
guard let toViewController = transitionContext.viewController(forKey: .to) else { return }
guard let fromView = fromViewController.view, let toView = toViewController.view else { return }
let duration = self.transitionDuration(using: transitionContext)
// 動畫還原
UIView.animate(withDuration: duration, delay: 0, options: .curveEaseOut, animations: {
fromView.frame.origin.y = UIScreen.main.bounds.height
self.maskBackgroundView?.alpha = 0.0
toView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
}, completion: { (_) in
self.maskBackgroundView?.removeFromSuperview()
// 注意！：因為外面使用了 overFullScreen ，dismiss 會丟失檢視，需要自己手動加上
UIApplication.shared.keyWindow?.insertSubview(toView, at: 0)
// 因為使用了 overFullScreen，導致 source 沒法正常呼叫 viewWillAppear 和 viewDidAppear，這裡手動觸發
if let source = self.source {
source.viewWillAppear(false)
source.viewDidAppear(false)
}
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})
}
/// 點選灰色背景事件處理
func clickMaskViewAction(_ gestureRecognizer: UITapGestureRecognizer) {
self.presented?.dismiss(animated: true, completion: nil)
}
}
複製程式碼點擴散轉場代理類
class RippleTransitionDelegate: NSObject, UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning {
// 自定義屬性，判斷是 present 還是 dismiss
fileprivate var isPresent: Bool = true
fileprivate weak var transitionContext: UIViewControllerContextTransitioning?
// 起始點座標
var startOrigin: CGPoint = CGPoint.zero
// 擴散半徑
fileprivate var radius: CGFloat = 0
init(startOrigin: CGPoint = .zero) {
super.init()
self.startOrigin = startOrigin
// 這裡取擴散最大半徑，即螢幕的對角線長
let screenWidth = ceil(UIScreen.main.bounds.size.width)
let screenHeight = ceil(UIScreen.main.bounds.size.height)
self.radius = sqrt((screenWidth * screenWidth) + (screenHeight * screenHeight))
}
/// 代理方法，返回處理 present 轉場動畫的物件
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
self.isPresent = true
return self
}
/// 代理方法，返回處理 dismiss 轉場動畫的物件
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
self.isPresent = false
return self
}
/// 代理方法，返回 present 或者 dismiss 的轉場時間
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
if self.isPresent { // present
return 0.45
} else { // dismiss
return 0.40
}
}
/// 代理方法，處理 present 或者 dismiss 的轉場，這裡分離出 2 個子方法分別處理 present 和 dismiss
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
self.transitionContext = transitionContext
if self.isPresent { // present
animateTransitionForPresent(using: transitionContext)
} else { // dismiss
animateTransitionForDismiss(using: transitionContext)
}
}
/// 自定義方法，處理 present 轉場
fileprivate func animateTransitionForPresent(using transitionContext: UIViewControllerContextTransitioning) {
guard let fromViewController = transitionContext.viewController(forKey: .from) else { return }
guard let toViewController = transitionContext.viewController(forKey: .to) else { return }
guard let fromView = fromViewController.view, let toView = toViewController.view else { return }
let duration = self.transitionDuration(using: transitionContext)
let containerView = transitionContext.containerView
containerView.addSubview(fromView)
containerView.addSubview(toView)
// 計算動畫圖層開始和結束路徑
let startFrame = CGRect(origin: self.startOrigin, size: .zero)
let maskStartPath = UIBezierPath(ovalIn: startFrame)
let maskEndPath = UIBezierPath(ovalIn: startFrame.insetBy(dx: -self.radius, dy: -self.radius))
// 建立動畫圖層， layer.mask 屬性是表示顯示的範圍
let maskLayer = CAShapeLayer()
maskLayer.path = maskEndPath.cgPath
toView.layer.mask = maskLayer
// 為動畫圖層新增路徑，從一個點開始擴散到整屏
let maskLayerAnimation = CABasicAnimation(keyPath: "path")
maskLayerAnimation.fromValue = maskStartPath.cgPath
maskLayerAnimation.toValue = maskEndPath.cgPath
maskLayerAnimation.duration = duration
maskLayerAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
maskLayerAnimation.delegate = self
maskLayer.add(maskLayerAnimation, forKey: "ripple_push_animation")
}
/// 自定義方法，處理 dismiss 轉場
fileprivate func animateTransitionForDismiss(using transitionContext: UIViewControllerContextTransitioning) {
guard let fromViewController = transitionContext.viewController(forKey: .from) else { return }
guard let toViewController = transitionContext.viewController(forKey: .to) else { return }
guard let fromView = fromViewController.view, let toView = toViewController.view else { return }
let duration = self.transitionDuration(using: transitionContext)
let containerView = transitionContext.containerView
containerView.insertSubview(toView, at: 0)
// 計算動畫圖層開始和結束路徑
let startFrame = CGRect(origin: self.startOrigin, size: .zero)
let maskStartPath = UIBezierPath(ovalIn: startFrame.insetBy(dx: -self.radius, dy: -self.radius))
let maskEndPath = UIBezierPath(ovalIn: startFrame)
// 建立動畫圖層，layer.mask 屬性是表示顯示的範圍
let maskLayer = CAShapeLayer()
maskLayer.path = maskEndPath.cgPath
fromView.layer.mask = maskLayer
// 為動畫圖層新增路徑，從整屏收縮到一個點
let maskLayerAnimation = CABasicAnimation(keyPath: "path")
maskLayerAnimation.fromValue = maskStartPath.cgPath
maskLayerAnimation.toValue = maskEndPath.cgPath
maskLayerAnimation.duration = duration
maskLayerAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
maskLayerAnimation.delegate = self
maskLayer.add(maskLayerAnimation, forKey: "ripple_dimiss_animation")
}
}
// MARK: - CAAnimationDelegate
extension RippleTransitionDelegate: CAAnimationDelegate {
/// 動畫結束後呼叫
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
// 把 layer.mask 賦值為 nil，是為了釋放動畫圖層
if let transitionContext = self.transitionContext {
if let toViewController = transitionContext.viewController(forKey: .to) {
toViewController.view.layer.mask = nil
}
if let fromViewController = transitionContext.viewController(forKey: .from) {
fromViewController.view.layer.mask = nil
}
transitionContext.completeTransition(true)
}
}
}
複製程式碼這三個轉場代理類的 Demo 程式碼在這：CustomTransitionDemo