View Controller Transition实现京东加购物车效果

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

总结

以上是内存溢出为你收集整理的View Controller Transition实现京东加购物车效果全部内容，希望文章能够帮你解决View Controller Transition实现京东加购物车效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。