效果图
以上是一个关于CollectionViewCell点击展开为一个二级页面的转场动画，支持手势过渡及完成度展现。
主要参考Kitten-Yang的文章做的效果。
UIViewControllerAnimatedTransitioning
官方开发文档
简单来说，这是一个协议。通过创建遵守该协议的对象，可以创建一个动画制作者对象，从而高度定制ViewController的转场动画。不过这个转场必须是不能互动的，如果需要创建支持互动的动画，则必须将你的动画制作者对象与另一个能够控制动画的对象关联起来。
互动支持
为了让转场动画对手势等有互动支持，需要与另一个遵守UIViewControllerInteractiveTransitioning协议的对象进行关联。
一般来说,我们不需要自己去专门写一个类来遵守这个*** UIViewControllerInteractiveTransitioning协议，系统中有一个类名为UIPercentDrivenInteractiveTransition***已经帮我们写好了。
UIPercentDrivenInteractiveTransition
该类基于UIViewControllerInteractiveTransitioning协议创建，为我们提供了三个主要方法：
- updateInteractiveTransition:
- cancelInteractiveTransition
- finishInteractiveTransition
第一个方法可以根据我们传入的progress参数来调整动画的完成度，后两个方法就顾名思义了，一个取消互动动画，一个结束互动动画。
动画思路
基本的类都介绍完了，接下来谈一下动画的思路。思路是最重要的一部分。
从效果图可以看到，从第一个ViewController(以下称FirstViewController)推到第二个ViewController(以下称SecondViewController)的过程中，Cell中的图片变换到了第二个ViewController中图片的位置。其次是一些界面上透明度的变化。
可以总结一句就是说
Cell.imageView.frame -> SecondViewController.imageView.frame
FirstViewController.view.alpha = 0 SecondViewController.alpha = 1
的一个过程。
动画执行的关键就是我们缺少一个容器去处理这样视图位置及透明度的变化。
好在func animateTransition(_ transitionContext: UIViewControllerContextTransitioning)中的transitionContext中有一个ContainView可以在我们进行转场的时候做容器使用。
截取了一部分代码：
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! DetailViewController
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! ViewController
let containView = transitionContext.containerView()
按上述可以拿到容器View及转场中的两个视图控制器。剩下要做的就是在ContainView中进行Frame等关键属性的变化。
但是需要注意的一点是，我们怎么把Cell中的ImageView提出来然后移到下一个ViewController中？
这时就需要动画中的一点障眼法，我们不需要移动Cell中的ImageView，移动会造成很多不必要的麻烦(还得移回去)，但是我们可以给他做一个截图，通过移动截图来营造移动了Cell的ImageView的假象。
下面是截图及初始化的主要部分代码,思路参考注释。
//获取当前点击的Cell
let indexPath = fromViewController.collectionView.indexPathsForSelectedItems()![0]
let cell = fromViewController.collectionView.cellForItemAtIndexPath(indexPath) as! CustomCollectionViewCell
//制作截图
let snapShotView = cell.imageView .snapshotViewAfterScreenUpdates(false)
//注意添加的先后顺序，否则会被遮挡。
containView?.addSubview((toViewController.view)!)
containView?.addSubview(snapShotView)
//截图在ContainView中的初始位置调整
snapShotView.frame = (cell.convertRect(cell.imageView.frame, toView: cell.superview!.superview))
snapShotView.frame = CGRectMake(snapShotView.frame.origin.x, snapShotView.frame.origin.y + 64, snapShotView.frame.size.width, snapShotView.frame.size.height)
//对变换前后的原视图进行隐藏
cell.imageView.hidden = true
toViewController.detailImageView.hidden = true
//设置第二个控制器位置，透明度
toViewController.view.frame = transitionContext .finalFrameForViewController(toViewController)
toViewController.view.alpha = 0
动画的变化思路前面已经提过，下面贴上真正的动画部分代码：
//动画
UIView.animateWithDuration(self.transitionDuration(transitionContext), delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 5, options: UIViewAnimationOptions.CurveLinear, animations: {
toViewController.view.alpha = 1
//假装把Cell的ImageView移动到第二个VC中的ImageView的位置。
snapShotView.frame = (toViewController.view?.convertRect(toViewController.detailImageView.frame, toView: toViewController.view.superview))!
}) { (success) in
toViewController.detailImageView.hidden = false;
cell.imageView.hidden = false;
//删除截图
snapShotView.removeFromSuperview()
//完成动画
transitionContext.completeTransition(!transitionContext.transitionWasCancelled())
}
还有一个必须实现的方法是：
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval
用来决定动画的执行时间
动画的使用
转场代码都可以保持不变，该Push地方Push，该Pop的地方Pop
在FirstViewController中执行
self.navigationController?.delegate = self
当然FirstViewController需要遵守UINavigationControllerDelegate协议。
然后实现
optional public func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?
具体如下：
//MARK: - Translation
func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
if toVC.isKindOfClass(DetailViewController)
//建议对第二个ViewController进行判断，否则pop回来动画混乱，如果有必要还可以对operation进行判断（push or pop）
{
//创建一个你刚写的类的对象即可。
let transition = MoveAnimation()
return transition
}
else{
return nil
}
}
以上就是Push部分动画，Pop回来的时候原理是一样的，只是ImageView的Frame变化反过来，alpha的变化也要反过来，所以可以另写一个Pop的动画类。
贴一个完成的与上对应的Pop动画部分:
import UIKit
class MoveInverseTransition: NSObject,UIViewControllerAnimatedTransitioning {
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
return 0.6
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! DetailViewController
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! ViewController
let containView = transitionContext.containerView()
//获取当前点击的Cell
let indexPath = toViewController.collectionView.indexPathsForSelectedItems()![0]
let cell = toViewController.collectionView.cellForItemAtIndexPath(indexPath) as! CustomCollectionViewCell
let snapShotView = fromViewController.detailImageView .snapshotViewAfterScreenUpdates(false)
containView?.addSubview((toViewController.view)!)
containView?.addSubview(snapShotView)
snapShotView.frame = (fromViewController.view.convertRect(fromViewController.detailImageView.frame, toView:fromViewController.view.superview))
cell.imageView.hidden = true
//设置第二个控制器位置，透明度
toViewController.view.frame = transitionContext .finalFrameForViewController(toViewController)
toViewController.view.alpha = 0
//动画
UIView.animateWithDuration(self.transitionDuration(transitionContext), delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 5, options: UIViewAnimationOptions.CurveLinear, animations: {
toViewController.view.alpha = 1
snapShotView.frame = (cell.convertRect(cell.imageView.frame, toView:cell.superview?.superview))
snapShotView.frame = CGRectMake(snapShotView.frame.origin.x, snapShotView.frame.origin.y + 64, snapShotView.frame.size.width, snapShotView.frame.size.height)
}){ (success) in
fromViewController.detailImageView.hidden = false;
cell.imageView.hidden = false;
snapShotView.removeFromSuperview()
transitionContext.completeTransition(!transitionContext.transitionWasCancelled())
}
}
}
动画的使用方式也与上相同。
手势交互
之前介绍过UIPercentDrivenInteractiveTransition，我们的手势交互就是主要建立在它所含的三个方法上。
思路:在动画过渡过程中，通过手势的滑动来计算出一个完成度的Progress(比较常见，比如手势计算缩放比例)，执行updateInteractiveTransition：progress 即可完成动画按百分比显示。
手势的设定
func setupGestureRecognizer() {
//设置边缘触控手势及其方位
let edgeGestureRecognizer = UIScreenEdgePanGestureRecognizer(target: self,action: #selector(DetailViewController.edgePanGesture(_:)))
edgeGestureRecognizer.edges = UIRectEdge.Left
self.view.addGestureRecognizer(edgeGestureRecognizer)
}
func edgePanGesture(gestureRecognizer:UIScreenEdgePanGestureRecognizer) {
//计算动画完成度Progress
var progress = gestureRecognizer.translationInView(self.view).x/self.view.frame.size.width
progress = min(1.0, max(0.0, progress))
if gestureRecognizer.state == UIGestureRecognizerState.Began{
//手势开始，执行Pop动作，触发动画
percentTransition = UIPercentDrivenInteractiveTransition()
self.navigationController?.popViewControllerAnimated(true)
}
else if gestureRecognizer.state == UIGestureRecognizerState.Changed{
//手势执行过程中，不停通过progress去更新动画状态
percentTransition?.updateInteractiveTransition(progress)
}
else if gestureRecognizer.state == UIGestureRecognizerState.Cancelled || gestureRecognizer.state == UIGestureRecognizerState.Ended {
//手势取消或者结束，判断是否完成动画或者取消。
if progress > 0.1
{
percentTransition?.finishInteractiveTransition()
}
else
{
percentTransition?.cancelInteractiveTransition()
}
}
}
交互动画的使用(实现两个NavigationController的代理方法)：
func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
if toVC.isKindOfClass(ViewController)
{
return MoveInverseTransition()
}
else{
return nil
}
}
func navigationController(navigationController: UINavigationController, interactionControllerForAnimationController animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
if animationController.isKindOfClass(MoveInverseTransition)
{
return percentTransition
}
else
{
return nil
}
}
完整Demo
以上内容都是在Kitten-Yang的文章基础上作了一些自己的理解，这是一篇学习笔记。