zoukankan      html  css  js  c++  java
  • 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,  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,  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>
    
  • 相关阅读:
    forfiles
    windows 安装 keras
    windows上使用tensorboard
    python类定义与c#的一些区别
    iis https 客户端证书
    DevExpress历史安装文件、源码、注册破解下载
    AE开发,执行GP操作的时候的错误
    USB无线网卡和PCI-E无线网卡如何选择(转)
    .NET 对实现IPersistStream接口的对象进行保存和读取
    搜索
  • 原文地址:https://www.cnblogs.com/theDesertIslandOutOfTheWorld/p/6419561.html
Copyright © 2011-2022 走看看