自定义navigation controller过渡动画 2

来自于PeteC/InteractiveViewControllerTransitions的定制过渡效果，这是个人非常喜欢的一种动画方式，习惯于成为元素重用，本章将要用Swift重写这个项目，掌握针对于页面的过渡动画，让自己的APP更具个性化。

源码见Github
demo为swift4版本，与文章代码略有不同

页面定制化的过渡方式同样依赖于UIViewControllerAnimatedTransitioning, 如果还不是很了解，可以复习一下自定义navigation controller过渡动画

---

设计思路

• 整个过渡动画的核心在于图片的移动，看上去是将tableViewCell上的图片移动到下一页控制器的view上，实际上我们会拷贝一份imageView从cell的位置移动到视图中心
• 动画的其他部分无非与设置各个view的透明度

步骤

1.初始化项目

• 两层控制器
• 相应的视图和模型
• push和pop动画接口
• 资源文件，详见源码
  
  

• 控制器的初始化

  
  
  
  
  
  
  
  

  初始化的过程比较重复，copy相应的代码就好

Swift Tip:
有一段初始化数据的代码比较有意思，可以感受一下
这里用到了lazy关键字进行懒加载，避免了oc里的判断。在赋值的右边，用到了一个匿名函数，并且紧接括号执行返回数组，比较类似于JavaScript的匿名立即执行函数

    lazy var things: [TTThing] = {
        let arr = []  // 通过字面量设置数组
        return arr
    }()

2.设置过渡动画

上一章已经详细说明过渡动画的设置方式，这里就直接进入核心部分----动画效果的处理

1.过场时间设置

依旧以push过场为例，在新建的TTCustomPushAnimation.swift文件内，首先实现

func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
    return 1
}

设置过场时间为1s，1秒的速度方便调试

2.view获取

然后来到动画大剧场

func animateTransition(transitionContext: UIViewControllerContextTransitioning)

在animateTransition内中设置
取得动画所需view

let containerView = transitionContext.containerView()
let fromVc = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! TTCustomFromController
let toVc = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! TTCustomToController
let cell = fromVc.collection.cellForItemAtIndexPath((fromVc.collection.indexPathsForSelectedItems()?.first)!) as! TTThingCell
let snapImageView = cell.imgView.snapshotViewAfterScreenUpdates(false)

除了过场必要的containerView、fromVc、toVc之外，我们还要通过collection取得点击的cell，并将这个cell上的ImageView拷贝成snapImageView备用

Swift Tip:
这里在取得fromVc、toVc、cell时都用到了as!进行强制类型转换，加上感叹号避免在之后调用中的可选解析
，但是在逻辑上就需要保证相应类型的正确，后面的代码会做相应类型保护

3.过场参数设置

除了必要的动画时间,还需要获得snapImageView在动画中的起始frame和终止frame(frame同时影响位置和大小)

let duration = self.transitionDuration(transitionContext)
let startFrame = cell.imgView.superview!.convertRect(cell.imgView.frame, toView: containerView)
let finalFrame = toVc.view.convertRect(toVc.imgView.frame, toView: containerView)

记得动画舞台containerView么，snapImageView会在整个过场中置于其中进行动画操作，所以我们使用convertRect将Cell上imageView的frame转换到containerView作为起始frame，将toVc上imageView转换到containerView作为终止frame

4.动画初始化

获得所有动画所需的属性后，接下来就是动画的准备活动了
1.将toVc的视图和snapImageView添加到containerView上
2.将snapImageView的frame设置到起始frame，以覆盖Cell上的imageView，并将Cell的imageView隐藏
3.将toVc的视图透明度设置为0，并隐藏toVc上的imageView

containerView?.addSubview(toVc.view)
containerView?.addSubview(snapImageView)

snapImageView.frame = startFrame
cell.imgView.hidden = true
toVc.view.alpha = 0
toVc.imgView.hidden = true

5.动画设置

在整个动画中只有2个流程
1.让toVc的视图逐渐显示出来
2.将snapImageView移动到终止frame

UIView.animateWithDuration(duration, animations: { () -> Void in
    toVc.view.alpha = 1
    snapImageView.frame = finalFrame
    }) { (finished) -> Void in
        toVc.imgView.hidden = false
        cell.imgView.hidden = false
        snapImageView.removeFromSuperview()
        transitionContext.completeTransition(!transitionContext.transitionWasCancelled())
}

动画结束之后，记得收场哦
1.移除snapImageView，并将toVc上的imageView显示出来
2.将cell上的imageView恢复显示
3.清除过场

3.设置push控制器

老规矩，上述操作写好了剧本，得让演员上台表演了。由于这里是定制的过场动画，并不能重写导航去影响所有的过场，所以需要指定的演员TTCustomFirstController
在TTCustomFirstController中，添加UINavigationControllerDelegate，显示控制器时添加代码，不显示时移除

override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)
    self.navigationController?.delegate = self
}

override func viewWillDisappear(animated: Bool) {
    super.viewWillDisappear(animated)
    if let _ = self.navigationController?.delegate {
        self.navigationController?.delegate = nil
    }
}

然后声明此控制器的过场方式

func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    if fromVC == self && toVC is TTCustomSecondController {
        return TTCustomPushAnimation()
    }
    return nil
}

在导航的代理方法中，我们返回了自定义的过场动画接口，并对fromVc和toVc都做了类型判断，还记得我们在上面用到的as!强制类型转换么，这里的判断能保证类型的正确使用
重启程序，push的过场已经和预期的是一样的了 ☺️

4.设置pop动画

push动画已经设置完毕，pop动画依旧是push的逆向过程

1.初始化pop过场动画

新建TTCustomPopAnimation，实现UIViewControllerAnimatedTransitioning的两个方法，这里直接贴出pop动画的设置代码
依旧需要注意的是fromVc和toVc对应的控制器

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
    let containerView = transitionContext.containerView()
    let fromVc = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! TTCustomSecondController
    let toVc = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! TTCustomFirstController
    let selectedCell = toVc.collection.cellForItemAtIndexPath(toVc.selectedIndex!) as! TTThingCell
    let snapImgView = fromVc.imgView.snapshotViewAfterScreenUpdates(false)

    let duration = self.transitionDuration(transitionContext)
    let startFrame = fromVc.view.convertRect(fromVc.imgView.frame, toView: containerView)
    let finalFrame = selectedCell.imgView.convertRect(selectedCell.imgView.frame, toView: containerView)

    snapImgView.frame = startFrame
    fromVc.imgView.hidden = true
    toVc.view.alpha = 0

    containerView?.insertSubview(toVc.view, belowSubview: fromVc.view)
    containerView?.addSubview(snapImgView)

    UIView.animateWithDuration(duration, animations: { () -> Void in
        toVc.view.alpha = 1
        fromVc.view.alpha = 0
        snapImgView.frame = finalFrame
        }) { (finished) -> Void in
            fromVc.imgView.hidden = false
            selectedCell.imgView.hidden = false
            snapImgView.removeFromSuperview()
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled())
    }
}

pop动画的设置还是有几个小坑的：
1.需要取得控制器跳转前点击的那个cell，这里采用了简化的方法，在cell点击时，将index记录在selectedIndex，方便pop的时候直接取用
2.注意各个视图透明度和hidden的控制

2.设置pop控制器

重复设置push控制器的流程，在TTCustomSecondController中，添加UINavigationControllerDelegate并实现导航代理方法

func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    if fromVC.isEqual(self) && toVC is TTCustomFirstController {
        return TTCustomPopAnimation()
    }
    return nil
}

再次启动项目，pop的动画也能够正常工作了

5.手势返回

跟之前一样，自定义过场之后，右划手势返回会失效，需要重新设置，这里就不重复这部分内容了，但是新的手势需要加到TTCustomSecondController控制器内，自定义手势

---

如果你也喜爱游戏，欢迎支持我的APP Up 游戏专辑