热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

ViewControllerTransition实现京东加购物车效果

这篇文章主要介绍了ViewControllerTransition实现京东加购物车效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下

这篇文章中我们主要来叙述一下上述动画效果的实现方案。主要涉及 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 就介绍到这里,你应该熟悉了其使用方法,至于博客中的动画效果,我想就没办法深究了,这是一个花费时间苦差事。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 深入解析Spring Boot自动配置机制
    本文旨在深入探讨Spring Boot的自动配置机制,特别是如何利用配置文件进行有效的设置。通过实例分析,如Http编码自动配置,我们将揭示配置项的具体作用及其背后的实现逻辑。 ... [详细]
  • 本文档详细介绍了如何构建和配置 EFKLK(Elasticsearch, Fluentd, Kibana, Kafka)日志采集工具链,包括命名空间创建、Elasticsearch 镜像拉取与容器运行、证书生成及配置、Helm 安装等步骤。 ... [详细]
  • 本文探讨了Web开发与游戏开发之间的主要区别,旨在帮助开发者更好地理解两种开发领域的特性和需求。文章基于作者的实际经验和网络资料整理而成。 ... [详细]
  • 本文将指导您如何在Docker环境中高效地搜索、下载Redis镜像,并通过指定或不指定配置文件的方式启动Redis容器。同时,还将介绍如何使用redis-cli工具连接到您的Redis实例。 ... [详细]
  • Lua编程进阶:数组与迭代器详解
    本文深入探讨了Lua语言中的数组和迭代器,通过实例讲解了一维数组、多维数组的使用方法及迭代器的工作原理。 ... [详细]
  • 全能终端工具推荐:高效、免费、易用
    介绍一款备受好评的全能型终端工具——MobaXterm,它不仅功能强大,而且完全免费,适合各类用户使用。 ... [详细]
  • 容器与微服务基础:快速入门指南
    探索容器和微服务的基础知识,了解如何通过先进的应用性能管理(APM)工具提升监控效能。加入AppDynamics APM的导览,掌握容器与微服务实施及监控的最佳实践。 ... [详细]
  • Docker 自定义网络配置详解
    本文详细介绍如何在 Docker 中自定义网络设置,包括网关和子网地址的配置。通过具体示例展示如何创建和管理自定义网络,以及容器间的通信方式。 ... [详细]
  • 深入理解Docker网络管理
    本文介绍了Docker网络管理的基本概念,包括为什么需要Docker网络管理以及Docker提供的多种网络驱动模式。同时,文章还详细解释了Docker网络相关的命令操作,帮助读者更好地理解和使用Docker网络功能。 ... [详细]
  • Matlab 实现工程与科学问题 - 第三章个人解析
    作为一名在读大学生,本文分享了我对《工程与科学中的Matlab应用》第三章习题的个人解决方案。欢迎通过私信或评论进行交流和讨论,但不接受任何形式的权威指导。文中提供了详细的代码实现,旨在促进学习和共同进步。 ... [详细]
  • 本文档详细介绍了在 Kubernetes 集群中部署 ETCD 数据库的过程,包括实验环境的准备、ETCD 证书的生成及配置、以及集群的启动与健康检查等关键步骤。 ... [详细]
  • 热璞数据库与云宏达成兼容性互认证,共筑数据安全屏障
    热璞数据库与云宏信息技术有限公司近期宣布完成产品兼容性互认证,旨在提升数据安全性与稳定性,支持企业数字化转型。 ... [详细]
  • 本文探讨了使用Filter作为控制器的优势,以及Servlet与Filter之间的主要差异。同时,详细解析了Servlet的工作流程及其生命周期,以及ServletConfig与ServletContext的区别与应用场景。 ... [详细]
  • ServletContext接口在Java Web开发中扮演着重要角色,它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext,开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]
  • 前言Git是目前最流行的版本控制系统,在它的基础之上,GitHub和GitLab成为当前最流行的代码托管平台,它们均提供的代码评审、项目管理、持续集成等功能,越来越多的互联网企业都 ... [详细]
author-avatar
豬仔珊珊_114
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有