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

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