关于自定义转场动画，我都告诉你。

487 查看

概述

这篇文章，我将讲述几种转场动画的自定义方式，并且每种方式附上一个示例，毕竟代码才是我们的语言，这样比较容易上手。其中主要有以下三种自定义方法，供大家参考：

Push & Pop
Modal
Segue

前两种大家都很熟悉，第三种是 Stroyboard 中的拖线，属于 UIStoryboardSegue 类，通过继承这个类来自定义转场过程动画。

Push & Pop

首先说一下 Push & Pop 这种转场的自定义，操作步骤如下：

创建一个文件继承自 NSObject, 并遵守 UIViewControllerAnimatedTransitioning协议。

实现该协议的两个基本方法：

//指定转场动画持续的时长

func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval

//转场动画的具体内容

func animateTransition(transitionContext: UIViewControllerContextTransitioning)

遵守 UINavigationControllerDelegate 协议，并实现此方法：

1	func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?

在此方法中指定所用的 UIViewControllerAnimatedTransitioning，即返回 第1步 中创建的类。

注意：由于需要 Push 和 Pop，所以需要两套动画方案。解决方法为：

在 第1步 中，创建两个文件，一个用于 Push 动画，一个用于 Pop动画，然后 第3步 中在返回动画类之前，先判断动画方式（Push 或 Pop）, 使用 operation == UINavigationControllerOperation.Push 即可判断，最后根据不同的方式返回不同的类。

到这里就可以看到转场动画的效果了，但是大家都知道，系统默认的 `Push 和 Pop` 动画都支持手势驱动，并且可以根据手势移动距离改变动画完成度。幸运的是，Cocoa 已经集成了相关方法，我们只用告诉它百分比就可以了。所以下一步就是手势驱动。

在第二个 UIViewController 中给 View 添加一个滑动（Pan）手势。
创建一个 UIPercentDrivenInteractiveTransition 属性。
在手势的监听方法中计算手势移动的百分比，并使用 UIPercentDrivenInteractiveTransition 属性的 updateInteractiveTransition() 方法实时更新百分比。
最后在手势的 state 为 ended 或 cancelled 时，根据手势完成度决定是还原动画还是结束动画，使用 UIPercentDrivenInteractiveTransition 属性的 cancelInteractiveTransition() 或 finishInteractiveTransition() 方法。
实现 UINavigationControllerDelegate 中的另一个返回 UIViewControllerInteractiveTransitioning 的方法，并在其中返回 第4步 创建的 UIPercentDrivenInteractiveTransition 属性。

至此，Push 和 Pop 方式的自定义就完成了，具体细节看下面的示例。

自定义 Push & Pop 示例

此示例来自 Kitten Yang 的blog 实现Keynote中的神奇移动效果，我将其用 Swift 实现了一遍，源代码地址: MagicMove，下面是运行效果。

MagicMove.gif

初始化

创建两个 ViewController，一个继承自 UICollectionViewController，取名 ViewController。另一个继承 UIViewController，取名 DetailViewController。在 Stroyboard 中创建并绑定。
在 Stroyboard 中拖一个 UINavigationController，删去默认的 rootViewController，使 ViewController 作为其 rootViewController，再拖一条从 ViewController 到 DetailViewController 的 segue。
在 ViewController 中自定义 UICollectionViewCell，添加 UIImageView 和 UILabel。
在 DetailViewController 中添加 UIImageView 和 UITextView

mm_inital.png

添加 `UIViewControllerAnimatedTransitioning`

添加一个 Cocoa Touch Class，继承自 NSObject，取名 MagicMoveTransion，遵守 UIViewControllerAnimatedTransitioning 协议。

实现协议的两个方法，并在其中编写 Push 的动画。 具体的动画实现过程都在代码的注释里 :

func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval {

return 0.5

}

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

//1.获取动画的源控制器和目标控制器

let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! ViewController

let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! DetailViewController

let container = transitionContext.containerView()

//2.创建一个 Cell 中 imageView 的截图，并把 imageView 隐藏，造成使用户以为移动的就是 imageView 的假象

let snapshotView = fromVC.selectedCell.imageView.snapshotViewAfterScreenUpdates(false)

snapshotView.frame = container.convertRect(fromVC.selectedCell.imageView.frame, fromView: fromVC.selectedCell)

fromVC.selectedCell.imageView.hidden = true

//3.设置目标控制器的位置，并把透明度设为0，在后面的动画中慢慢显示出来变为1

toVC.view.frame = transitionContext.finalFrameForViewController(toVC)

toVC.view.alpha = 0

//4.都添加到 container 中。注意顺序不能错了

container.addSubview(toVC.view)

container.addSubview(snapshotView)

//5.执行动画

UIView.animateWithDuration(transitionDuration(transitionContext), delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

snapshotView.frame = toVC.avatarImageView.frame

toVC.view.alpha = 1

}) { (finish: Bool) -> Void in

fromVC.selectedCell.imageView.hidden = false

toVC.avatarImageView.image = toVC.image

snapshotView.removeFromSuperview()

//一定要记得动画完成后执行此方法，让系统管理 navigation

transitionContext.completeTransition(true)

}

使用动画

让 ViewController 遵守 UINavigationControllerDelegate 协议。

在 ViewController 中设置 NavigationController 的代理为自己：