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

最新推荐文章于 2020-08-28 00:50:39 发布

原创最新推荐文章于 2020-08-28 00:50:39 发布 · 282 阅读

CC 4.0 BY-SA版权

本文介绍了如何在iOS应用中实现自定义转场动画。通过创建PresenterViewController、Animator及PresentedViewController等组件，并利用UIViewControllerTransitioningDelegate进行动画管理，可以为ViewController的呈现和消失过程定制独特的视觉效果。

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

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

这篇博客中，我们主要来叙述一下上述动画效果的实现方案。主要涉及 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 就介绍到这里，你应该熟悉了其使用方法，至于博客中的动画效果，我想就没办法深究了，这是一个花费时间苦差事。

我搭建了个人站点，那里有更多内容，请多多指教。点我哦！！！