View Controller Transition：京东加购物车效果

冬天已经过去了，阳光越来越暖洋洋的了。还记得上学的时候，老师总说“春天是播种的季节”，而我还没在朋友圈许下什么愿望。一年了，不敢想象回首还能看到点什么，所以勇往直前。当被俗世所扰，你是否也丢失了自己，忘却了理想。

欲做精金美玉的人品，定从烈火中煅来；
思立掀天揭地的事功，须向薄冰上履过。

这篇博客中，我们主要来叙述一下上述动画效果的实现方案。主要涉及 View Controller 转场动画的知识。

<a href="http://www.iddev.cn">我搭建了个人站点，那里有更多内容，请多多指教。点我哦！！！</a>

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 就介绍到这里，你应该熟悉了其使用方法，至于博客中的动画效果，我想就没办法深究了，这是一个花费时间苦差事。

<a href="http://www.iddev.cn">我搭建了个人站点，那里有更多内容，请多多指教。点我哦！！！</a>