自定义视图控制器转场动画[译]

iOS动画教学：自定义视图控制器转场动画

Note from Ray:这是从iOS Animations by Tutorials Second Edition摘录的一小节，能从这篇文章中显露出书籍讲述的内容。教程基于iOS 9，Xcode 7和Swift 2。

是否当你想要显示摄像视图控制器，地址栏或者你自定义的场景控制器时，你都是在调用相同的UIKit方法:presentViewController(_:animated:completion:)。这个方法“丢掉”当前的视图控制器从而转向其他的控制器。

默认的转场动画简单地从当前的视图滑入一个新的视图，下面这个图展示了如何从当前联系人列表滑入展示一个“新的联系人”视图控制器。

在这个教程里，你将会创建自定义转场控制器用以替代默认的动画，使得教程的初始项目变得更加有生气。

开始

你可以从初始项目这里下载，解压zip文件和打开Beginner Cook项目，选择Main.Stroyboard开始教程：

第一个视图控制器(ViewController)包含了app的标题，主要的描述还有一个scroll View在底部用于展示可用的药草列表。

当点击列表当中的任意一张图片时，HerbDetailSViewController作为主要的控制器展示。这个视图控制器图片作为背景，有标题，文字描述和一些按钮用作指示图片的拥有者。

项目里ViewController.swift和HerbDetailsViewController.swift有足够的代码支撑这个小项目。构建和运行项目你会看到如下的效果图：

随意点击其中一张药草的图片，详情页面会通过标准的转从动画（从底部滑动）展示出来。这说明你的app是完好的，但是你的药草能够展示得更好！

你的工作是为你的app添加自定义的转场使其绽放！你将会更换当前的动画，使其变成一点击药草图片即会伸展铺满整个屏幕如下图这样：

卷起的衣袖，戴上你开发者的围裙，准备为你的app做一个自定义转场控制器吧！

在自定义场景过渡的背后

UIKit允许你自定义你的视图控制器展示方式通过协议的模式；你需要使你主控制器（或者其他你为了展示而创建的类）适应UIViewControllerTransitionDelegate.

每一次你展示一个新的视图控制器，UIKit会向协议请求是否应该使用一个自定义的转换。这是你自定义转场动画的第一步，如下图：

UIKit调用animationControllerForPresentedController(:_ presentingController:sourceController:); 如果这个方法返回nil，UIKit会使用内建的转场方法。如果UIKit在这个方法接收到一个对象，UIKit会使用这个对象用作转场。

在UIKit能够使用自定义动画控制器之前还有一些步骤：

UIKit在转场时间内会首先请求你的动画控制器（你可以理解为动画设计者）然后会调用他的animateTransition()，这里就是进行你自定义动画的关键步骤。

在animateTransition(),你会使用当前的视图控制器和将要显示的视图控制器，你可以渐隐，缩放，旋转和任意操控存在和即将显示的视图。

现在你已经学会了一些关于自定义转场控制器的工作原理，你可以开始做一个你自己的转场控制器了。

实现过渡协议

由于代理的任务是用于管理展示动画设计者对象，所以在你编写代理的代码之前你需要先创建一个动画设计者的类。

从Xcode的主菜单选择 File\New\File...然后选择模版 iOS\Source\Cocoa Touch Class

设置新建类为NSObject的子类，名称为PopAnimator。

打开PopAnimator.swift然后使其遵循UIViewControllerAnimatedTransitioning protocol如下：

class PopAnimator: NSObject, UIViewControllerAnimatedTransitioning {

}

然后你会看到Xcode会向你抱怨，因为你还没有实现代理的必须方法，所以接下来把它们实现。

添加以下方法到类内:

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

返回0仅仅是作为一个转场时间占位值，在后面你可以自行替换这个值。

继续添加一下方法到类内：

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

}

上面的函数指示你的动画代码；添加完之后Xcode不会再向你提示错误。现在你有了动画设计者的类，接下来该接续在视图控制器实现另外一个协议方法。

打开ViewController.swift添加下列扩展:

extension ViewController: UIViewControllerTransitioningDelegate {

}

这段代码指示出你的视图控制器是遵循该协议的，待会你会添加一些方法的实现。

在类内找到didTapImage()这个方法，你会看到展现细节视图控制器的代码。herbDetails是这个新的视图控制器的实例；你需要设置他的转场协议代理给主视图控制器。

在刚才的方法的最后一行添加这段代码然后再presentViewController：

herbDetails.transitioningDelegate = self

现在每当ViewController展示细节视图控制器时，UIKit都会向它请求一个动画设计者对象。但是，你现在还没有实现UIViewControllerTransitioningDelegate的方法，所以目前为止还是使用默认的过渡方法。

下一步就是创建一个动画设计者对象，并当UIKit请求时返回给它。

为ViewController添加一个新的属性：

let transition = PopAnimator()

这是一个用于驱动你的视图控制器动画过渡的PopAnimator实例。只要你希望的过渡的动画是一样的，你便能一直使用这个实例来过渡新的视图控制器。

接下来实现扩展里面的代理方法：

func animationControllerForPresentedController(
    presented: UIViewController,
    presentingController presenting: UIViewController,
    sourceController source: UIViewController) ->
    UIViewControllerAnimatedTransitioning? {

    return transition
}

这个方法的参数能够提供给你判断是否使用特别的过渡动画。在这个教程里你只会返回唯一的这个PopAnimator实例。

你已经实现了过渡到其他控制器的方法，但是你是否也想要处理控制器消失的那一个方法？

添加下面这个方法能解决上面的问题:

func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    return nil
}

这个方法和之前那个方法是类似的，你能够通过检查参数来获知是哪个控制器将要消失掉，以及是否需要使用自定义的过渡动画。暂时来说我们先返回nil，在往后再实现这个小时的动画。

你已经实现了一个自定义的动画设计者去管理你的控制器过渡，但是已经能工作了吗？

构建和运行你的项目然后轻触其中一张药草的图片：

创建你自己的过渡动画设计者

打开PopAnimator.swift；我们将要在这里添加视图控制器之间的过渡代码。

首先，添加以下的属性到类内：

let duration    = 1.0
var presenting  = true
var originFrame = CGRect.zero

duration会使用在好几个地方，例如：告知UIKit过渡持续的时间和当我们创建动画的时候也需要用到。

persenting会指示你的动画设计者是正在展现或者取消一个视图控制器。你需要时刻更新这个属性，因为是需要它指示动画是向前发展或者调转向后。

最后，你会使用originFrame去储存被点击图像的原始frame－你会从这个frame扩展到整个屏幕的尺寸，反之亦然。当你选择了图像，你需要获得该图像的frame然后传递给动画设计者这个实例。

现在你该继续实现UIViewControllerAnimatedTransitioning方法。

替代刚才写好的transitionDuration()实现：

return duration

使用duration属性使你能轻易试验和改变动画的过渡时间。

设置过渡的上下文

是时候添加一下酷炫的东西到animateTransition。这个方法有一个UIViewControllerContextTransitioning类型的参数用于你获得需要的参数和控制器之间的过渡。

在你开始写代码之前，你首先要明白什么是动画的上下文。

当两个控制器之间开始过渡的时候，当前存在的视图会被添加到一个过渡容器视图里，然后新的视图控制器会被创建，但是仍然未可见，就如下图所示:

因此你的任务是在animateTransition()里向过渡容器天价一个新的视图。使其“动画地进入”，然后有需要的话将旧的视图“动画地退出”。

默认来说，当动画完成时，旧的视图会被移出过渡容器。

添加一个酷炫的过渡

创建一个自己的过渡动画需要配合过渡上下文的“容器”视图来工作。这是一个临时的视图（更像是一个暂存器），它只会在过渡发生的时候才会添加的屏幕上。你能够在这个视图上创建你所有的动画。

把下面的代码插入到animateTransition():

let containerView = transitionContext.containerView()!

let toView =
transitionContext.viewForKey(UITransitionContextToViewKey)!

let herbView = presenting ? toView : transitionContext.viewForKey(UITransitionContextFromViewKey)!

你的动画会生存在containerView里，toView即是将要展示的新的视图。如果你是在将要显示的状态，herbView就是toView；能从上下文获得。不过在这个例子无论是展现或者消失，herbView总是你进行动画的对象。

当你展示细节视图控制器，它会扩张铺满整个屏幕，当它消息，它会缩少为原来图像的frame。

添加下面的代码到animateTransition():

let initialFrame = presenting ? originFrame : herbView.frame
let finalFrame = presenting ? herbView.frame : originFrame

let xScaleFactor = presenting ?
    initialFrame.width / finalFrame.width :
    finalFrame.width / initialFrame.width

let yScaleFactor = presenting ?
    initialFrame.height / finalFrame.height :
    finalFrame.height / initialFrame.height

上面这段代码，你检测得出初始和最后的动画frame然后计算出缩放的系数，用作待会的动画。

现在你应该认真地把心得视图摆放在被点击的图像上面；这会看起来像被点击的图片扩展到整个屏幕。

添加下面的代码到animateTransition():

let scaleTransform = CGAffineTransformMakeScale(xScaleFactor, yScaleFactor)

if presenting {
  herbView.transform = scaleTransform
  herbView.center = CGPoint(
    x: CGRectGetMidX(initialFrame),
    y: CGRectGetMidY(initialFrame))
  herbView.clipsToBounds = true
}

当展示一个新的视图，你设置它的缩放比例和位置，使其尽量合适初始图片的frame。

现在添加最后一点代码到animateTransition():

containerView.addSubview(toView)
containerView.bringSubviewToFront(herbView)

UIView.animateWithDuration(duration, delay:0.0,
  usingSpringWithDamping: 0.4,
  initialSpringVelocity: 0.0,
  options: [],
  animations: {
    herbView.transform = self.presenting ?
    CGAffineTransformIdentity : scaleTransform

    herbView.center = CGPoint(x: CGRectGetMidX(finalFrame),
                          y: CGRectGetMidY(finalFrame))

  }, completion:{_ in
    transitionContext.completeTransition(true)
})

首先我们会添加toView到container里面。接着，你需要确保herbView是在视图层的顶层，因为这是你想要。注意当消失视图控制器时，看第一行代码，toView是origin view（就是那个主视图），你的动画会因此被挡住，你需要把hertView的视图层往上提。

然后，你就能开始你的动画了－使用spring效果的动画会更好看！

在动画的展示过程中，你改变了herbView的大小比例和位置。当展现的时候，你从一个在底部的小尺寸扩展成整个屏幕的大小，因此变换是之前标记的变换。当消失时，你的动画需要缩小成原始图像的尺寸。

这里的重点：你设置新的控制器在被点击的图像上面；你使用动画变换着初始和结束的frame；最后，你调用completeTransition()方法提交这些逻辑给UIKit。现在是时候让你的代码动起来了！

构建和运行你的项目；点击第一个药草的图片你会看到你的视图控制器像你如期一样过渡。

现在你的动画开始在左下角，这是因为默认的originFrame的值是(0,0)-你还没有设置它。

打开ViewController.swift然后添加下面的代码到animationControllerForPresentedController()的顶部：

transition.originFrame = 
  selectedImage!.superview!.convertRect(selectedImage!.frame, toView: nil)

transition.presenting = true

这段代码会传递被你选中图像的frame给originFrame。然后设置presenting标志为true，然后在动画里被点击的图像会被隐藏。

再次构建和运行你的项目；试着点击列表里不同的药草图片，观察它们的过渡动画：

添加消失的过渡

剩下要做的工作就是消失细节控制器。你已经为动画设计者做了足够多的工作－过渡动画代码的逻辑适应了两种情况下的初始和消失的frame，因此你能非常轻易地完成剩下的工作。

打开ViewController.swift然后代替animationControllerForDismissedController() 这个方法的实现:

transition.presenting = false
return transition

这段代码时在告诉动画设计者对象：你正在消失一个视图控制器，该使用对应的动画代码去过渡。

构建和运行项目能够看到结构，点击一个药草图片然后再点击屏幕任意位置取消当前视图！

最后那一下点击的过渡有一点太过平整－你能动画地改变一下四角圆角半径使其平整地回到一开始的位置。

添加下面的代码到animateTransition:

let round = CABasicAnimation(keyPath: "cornerRadius")
round.fromValue = presenting ? 20.0/xScaleFactor : 0.0
round.toValue = presenting ? 0.0 : 20.0/xScaleFactor
round.duration = duration / 2
herbView.layer.addAnimation(round, forKey: nil)
herbView.layer.cornerRadius = presenting ? 0.0 : 20.0/xScaleFactor

当你展现细节视图控制器时，圆角半径从20.0到0.0，反之从0.0到20.0。一个友好的点击结束本节教程！

接下来做什么？

你可以从这里下载完成的项目。

之后，你可以继续提高这个项目。这里有一些主意：

在过渡的时候隐藏被点击的图片使其看起来更像生长到整个屏幕。

渐入和渐出药草的描述文字看来会更平整一点。

测试使过渡适应横屏。

更多处理过渡场景动画的章节在iOS Animations by Tutorials。在这本书里，你会学习到更多视图控制器的过渡展示，方向改变动画，导航控制器和交互过渡，等等。

我们希望你享受这个教程，如果你有任何问题或者建议，可以在下方留言！

原文地址