View Controller Transition：京東加購物車效果

冬天已通過去了，陽光愈來愈暖洋洋的了。還記得上學的時候，老師總說「春天是播種的季節」，而我還沒在朋友圈許下什麼願望。一年了，不敢想象回首還能看到點什麼，因此一往無前。當被俗世所擾，你是否也丟失了本身，忘卻了理想。

欲作精金美玉的人品，定從烈火中煅來；
思立掀天揭地的事功，須向薄冰上履過。

這篇博客中，咱們主要來敘述一下上述動畫效果的實現方案。主要涉及 View Controller 轉場動畫的知識。

我搭建了我的站點，那裏有更多內容，請多多指教。點我哦！！！

Presenting a View Controller

顯示一個 View Controller 主要有一下幾種方式：

• 使用 segues 自動顯示 View Controller；
• 使用 showViewController:sender: 和 showDetailViewController:sender: 方法顯示 View Controller；
• 調用 presentViewController:animated:completion: 方法依模態形式顯示 View Controller

經過上述方式，咱們能夠將一個 View Controller 顯示出來，而對於顯示地形式，咱們能夠使用 UIKit 中預約義的形式，也能夠自定義（即自定義轉場動畫）。

Customizing the Transition Animations

自定義轉場動畫中，主要包含如下幾個組件：

• Presenting View Controller（正在顯示的 View Controller）
• Animator（動畫管理者）
• Presented View Controller（要顯示的 View Controller）
• Transitioning Delegate Object（轉場代理，用來提供 Animator 對象）

實現自定義轉場動畫，一般按照如下幾個步驟來完成

• 建立 Presented View Controller；
• 建立 Animator；
• 設置 Presented View Controller 的 transitioningDelegate 屬性，並實現 UIViewControllerTransitioningDelegate 提供 Animator 對象；
• 在 Presenting View Controller 中調用 presentViewController:animated:completion: 顯示 Presented View Controller；

Presented View Controller

這裏，咱們將 Presented View Controller 自己做爲其轉場代理，你也能夠使用單獨的代理對象。

class PresentedViewController: UIViewController {
    let imageView = UIImageView(image: UIImage(named: "jd_add.jpg"))
    override func viewDidLoad() {
        super.viewDidLoad()
        // 1.設置 transitioningDelegate（轉場代理）
        transitioningDelegate = self
        modalPresentationStyle = .custom
        view.addSubview(imageView)
    }
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        imageView.frame = CGRect(x: 0, y: 120, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height - 120)
    }
    override func touchesBegan(_ touches: Set, with event: UIEvent?) {
        self.dismiss(animated: true, completion: nil)
    }
}

Animator

Animator 做爲轉場動畫的管理者，主要負責 Presenting 和 Dismissing 動畫效果。

動畫時長

/// 轉場動畫時長
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
    return TimeInterval(0.5)
}

執行動畫

/// 執行轉場動畫
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
    switch type {
    case .Present:
        present(transitionContext: transitionContext)
    case .Dismiss:
        dismiss(transitionContext: transitionContext)
    }
}

Presenting 動畫

/// Presenting 動畫
func present(transitionContext: UIViewControllerContextTransitioning) {
    /** 1.從轉場上下文中取出 Presenting/Pressented View Controller 及容器視圖 */
    guard let presentingVC = transitionContext.viewController(forKey: .from) as? ViewController else {
        return
    }
    guard let presentedVC = transitionContext.viewController(forKey: .to) as? PresentedViewController else {
        return
    }
    let containerView = transitionContext.containerView
    /** 2.設置 Presenting View Controller 所顯示內容的屬性 */
    // 對 presentingVC 的視圖內容截屏，用於 presentedVC 顯示出來時的背景
    guard let presentingVCViewSnapshot = presentingVC.view.snapshotView(afterScreenUpdates: false) else {
        return
    }
    // 隱藏 presentingVC 的 view，並將其截屏添加到 containerView 中
    presentingVC.view.isHidden = true
    containerView.addSubview(presentingVCViewSnapshot)
    // 改變 presentingVCViewSnapshot 的焦點
    presentingVCViewSnapshot.layer.anchorPoint = CGPoint(x: 0.5, y: 1)
    // 更新 presentingVCViewSnapshot 的 frame
    presentingVCViewSnapshot.frame = presentingVC.view.frame
    /** 3.設置 Presented View Controller 所顯示內容的屬性 */
    presentedVC.view.frame = CGRect(x: 0, y: containerView.bounds.height, width: containerView.bounds.width, height: containerView.bounds.height)
    containerView.addSubview(presentedVC.view)
    /** 4.設置 Presenting 轉場動畫 */
    UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
        // 改變 presentingVCViewSnapshot 的 layer 的 transform，使其繞 X軸 旋轉，並改變大小
        presentingVCViewSnapshot.layer.transform.m34 = -1 / 100.0
        presentingVCViewSnapshot.layer.transform = presentingVCViewSnapshot.layer.transform = CATransform3DConcat(CATransform3DMakeRotation(CGFloat(0.1), 1, 0, 0), CATransform3DMakeScale(0.85, 0.95, 1))
        // 改變 presentedVC 的 view 的 transform
        presentedVC.view.transform = CGAffineTransform(translationX: 0, y: -containerView.bounds.height)
    }) { (finished) in
        // 告知 UIKit Presenting 轉場動畫結束（很重要）
        transitionContext.completeTransition(true)
    }
}

Dismissing 動畫

/// Dismissing 動畫
func dismiss(transitionContext: UIViewControllerContextTransitioning) {
    /** 1.從轉場上下文中取出容器視圖、Presenting/Pressented View Controller 及其 view 的截屏 */
    let containerView = transitionContext.containerView
    guard let presentingVC = transitionContext.viewController(forKey: .from) as? PresentedViewController else {
        return
    }
    guard let presentedVC = transitionContext.viewController(forKey: .to) as? ViewController else {
        return
    }
    let subviewsCount = containerView.subviews.count
    let presentedVCViewSnapshot = containerView.subviews[subviewsCount - 2]
    /** 2.設置 Dismissing 轉場動畫 */
    UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
        // 將 presentedVCViewSnapshot 的 transform 恢復到初始值
        presentedVCViewSnapshot.layer.transform = CATransform3DIdentity
        // 將 presentedVC 的 view 的 transform 恢復到初始值
        presentingVC.view.transform = CGAffineTransform.identity
    }) { (finished) in
        // 使 presentedVC 的 view 顯示出來，並隱藏其截屏
        presentedVC.view.isHidden = false
        presentedVCViewSnapshot.removeFromSuperview()
        // 告知 UIKit Dismissing 轉場動畫結束（很重要）
        transitionContext.completeTransition(true)
    }
}

Transitioning Delegate

// MARK: - 2.實現 UIViewControllerTransitioningDelegate 提供 Animator
extension PresentedViewController: UIViewControllerTransitioningDelegate {
    /// Present
    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        return MyAnimator(type: .Present)
    }
    /// Dismiss
    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        return MyAnimator(type: .Dismiss)
    }
}

Present

@IBAction func present() {
    let presentedVC = PresentedViewController()
    present(presentedVC, animated: true, completion: nil)
}

關於 View Controller Transition 就介紹到這裏，你應該熟悉了其使用方法，至於博客中的動畫效果，我想就沒辦法深究了，這是一個花費時間苦差事。

我搭建了我的站點，那裏有更多內容，請多多指教。點我哦！！！