转场动画这事。说简单也简单。能够通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现、隐藏视图。假设用到了navigationController，还能够调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈、弹栈。
下图中全部转场动画都是自己定义的动画。这些效果假设不用自己定义动画则非常难甚至无法实现：
因为录屏的原因，有些效果无法全然展现，比方它事实上还支持横屏。
自己定义转场动画的效果实现起来比較复杂。假设不过拷贝一份可以执行的代码却不懂当中原理，就有可能带来各种隐藏的bug。本文由浅入深介绍以下几个知识：
- 传统的基于闭包的实现方式及其缺点
- 自己定义present转场动画
- 交互式(Interactive)转场动画
- 转场协调器与UIModalPresentationCustom
- UINavigationController转场动画
我为这篇教程制作了一个demo，您能够去在我的github上clone下来：CustomTransition。假设认为有帮助还望给个star以示支持。
本文以Swift+纯代码实现，相应的OC+Storyboard版本号在demo中也能够找到，那是苹果的官方示范代码，正确性更有保证。demo中用到了CocoaPods，您或许须要运行pod
install命令并打开.xcworkspace文件。
在開始正式的教程前，您首先须要下载demo，在代码面前文字是苍白的。demo中包括的凝视足以解释本文全部的知识点。
其次，您还得了解这几个背景知识。
From和To
在代码和文字中。常常会出现fromView和toView。
假设错误的理解它们的含义会导致动画逻辑全然错误。
fromView表示当前视图，toView表示要跳转到的视图。假设是从A视图控制器present到B。则A是from，B是to。从B视图控制器dismiss到A时，B变成了from，A是to。用一张图表示：
Presented和Presenting
这也是一组相对的概念，它easy与fromView和toView混淆。简单来说，它不受present或dismiss的影响，假设是从A视图控制器present到B，那么A总是B的presentingViewController,B总是A的presentedViewController。
modalPresentationStyle
这是一个枚举类型，表示present时动画的类型。当中能够自己定义动画效果的仅仅有两种：FullScreen和Custom，两者的差别在于FullScreen会移除fromView，而Custom不会。比方文章开头的gif中。第三个动画效果就是Custom。
最简单的转场动画是使用transitionFromViewController方法：
这种方法尽管已经过时，可是对它的分析有助于后面知识的理解。
它一共同拥有6个參数。前两个表示从哪个VC開始，跳转到哪个VC，中间两个參数表示动画的时间和选项。最后两个參数表示动画的详细实现细节和回调闭包。
这六个參数事实上就是一次转场动画所必备的六个元素。它们能够分为两组，前两个參数为一组，表示页面的跳转关系，后面四个为一组，表示动画的运行逻辑。
这种方法的缺点之中的一个是可自己定义程度不高(在后面您会发现能自己定义的不不过动画方式)，还有一个缺点则是重用性不好，也能够说是耦合度比較大。
在最后两个闭包參数中，能够预见的是fromViewController和toViewController參数都会被用到，并且他们是动画的关键。
如果视图控制器A能够跳转到B、C、D、E、F，并且跳转动画基本相似。您会发现transitionFromViewController方法要被复制多次，每次仅仅会改动少量内容。
自己定义present转场动画
出于解耦和提高可自己定义程度的考虑，我们来学习转场动画的正确使用姿势。
首先要了解一个关键概念：转场动画代理，它是一个实现了UIViewControllerTransitioningDelegate协议的对象。我们须要自己实现这个对象，它的作用是为UIKit提供下面几个对象中的一个或多个：
-
Animator：
它是实现了UIViewControllerAnimatedTransitioning协议的对象，用于控制动画的持续时间和动画展示逻辑，代理能够为present和dismiss过程分别提供Animator，也能够提供同一个Animator。
-
交互式Animator：和Animator类似，只是它是交互式的。后面会有具体介绍
-
Presentation控制器：
它能够对present过程更加彻底的自己定义，比方改动被展示视图的大小，新增自己定义视图等，后面会有具体介绍。
在这一小节中。我们首先介绍最简单的Animator。回想一下转场动画必备的6个元素，它们被分为两组，彼此之间没有关联。Animator的作用等同于第二组的四个元素，也就是说对于同一个Animator。能够适用于A跳转B，也能够适用于A跳转C。
它表示一种通用的页面跳转时的动画逻辑。不受限于详细的视图控制器。
假设您读懂了这段话，整个自己定义的转场动画逻辑就非常清楚了。以视图控制器A跳转到B为例：
- 创建动画代理，在事情比較简单时。A自己就能够作为代理
- 设置B的transitioningDelegate为步骤1中创建的代理对象
- 调用
presentViewController:animated:completion:并把參数animated设置为true
- 系统会找到代理中提供的Animator。由Animator负责动画逻辑
用详细的样例解释就是：
class CrossDissolveFirstViewController: UIViewController, UIViewControllerTransitioningDelegate {
crossDissolveSecondViewController.transitioningDelegate = self
func animationButtonDidClicked() {
self.presentViewController(crossDissolveSecondViewController,
animated: true, completion: nil)
}
func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning?
{
return HalfWaySpringAnimator()
}
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?
{
return CrossDissolveAnimator()
}
}
动画的关键在于animator怎样实现，它实现了UIViewControllerAnimatedTransitioning协议。至少须要实现两个方法，我建议您细致阅读animateTransition方法中的凝视。它是整个动画逻辑的核心：
class HalfWaySpringAnimator: NSObject, UIViewControllerAnimatedTransitioning {
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
return 2
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
let containerView = transitionContext.containerView()
var fromView = fromViewController?
.view
var toView = toViewController?.view
if transitionContext.respondsToSelector(Selector("viewForKey:")) {
fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)
toView = transitionContext.viewForKey(UITransitionContextToViewKey)
}
toView?.frame = CGRectMake(fromView!.frame.origin.x, fromView!.frame.maxY / 2, fromView!.frame.width, fromView!.frame.height)
toView?.alpha = 0.0
containerView?
.addSubview(toView!)
let transitionDuration = self.transitionDuration(transitionContext)
UIView.animateWithDuration(transitionDuration, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 0, options: .CurveLinear, animations: { () -> Void in
toView!.alpha = 1.0
toView?.frame = transitionContext.finalFrameForViewController(toViewController!)
}) { (finished: Bool) -> Void in
let wasCancelled = transitionContext.transitionWasCancelled()
transitionContext.completeTransition(!wasCancelled)
}
}
}
animateTransition方法的核心则是从转场动画上下文获取必要的信息以完毕动画。
上下文是一个实现了UIViewControllerContextTransitioning的对象，它的作用在于为animateTransition方法提供必备的信息。您不应该缓存不论什么关于动画的信息。而是应该总是从转场动画上下文中获取(比方fromView和toView)。这样能够保证总是获取到最新的、正确的信息。
获取到足够信息后，我们调用UIView.animateWithDuration方法把动画交给Core Animation处理。千万不要忘记在动画调用结束后，运行completeTransition方法。
本节的知识在Demo的Cross Dissolve目录中有具体的代码。
当中有两个animator文件。这说明我们能够为present和dismiss提供同一个animator，或者分别提供各自相应的animator。假设两者动画效果类似，您能够共用同一个animator，惟一的差别在于：
- present时。要把
toView增加到container的视图层级。
- dismiss时，要把
fromView从container的视图层级中移除。
假设您被前面这一大段代码和知识弄晕了，或者临时用不到这些详细的知识，您至少须要记住自己定义动画的基本原理和流程：
- 设置将要跳转到的视图控制器(
presentedViewController)的transitioningDelegate
- 充当代理的对象能够是源视图控制器(
presentingViewController)，也能够是自己创建的对象，它须要为转场动画提供一个animator对象。
- animator对象的
animateTransition是整个动画的核心逻辑。
交互式(Interactive)转场动画
刚刚我们说到。设置了toViewController的transitioningDelegate属性而且present时，UIKit会从代理处获取animator，事实上这里另一个细节：UIKit还会调用代理的interactionControllerForPresentation:方法来获取交互式控制器。假设得到了nil则运行非交互式动画。这就回到了上一节的内容。
假设获取到了不是nil的对象，那么UIKit不会调用animator的animateTransition方法。而是调用交互式控制器(还记得前面介绍动画代理的示意图么，交互式动画控制器和animator是平级关系)的startInteractiveTransition:方法。
所谓的交互式动画，一般是基于手势驱动。产生一个动画完毕的百分比来控制动画效果(文章开头的gif中第二个动画效果)。整个动画不再是一次性、连贯的完毕。而是在不论什么时候都能够改变百分比甚至取消。这须要一个实现了UIPercentDrivenInteractiveTransition协议的交互式动画控制器和animator协同工作。这看上去是一个很复杂的任务，但UIKit已经封装了足够多细节。我们仅仅须要在交互式动画控制器和中定义一个时间处理函数(比方处理滑动手势)，然后在接收到新的事件时。计算动画完毕的百分比而且调用updateInteractiveTransition来更新动画进度就可以。
用以下这段代码简单表示一下整个流程(删除了部分细节和凝视。请不要以此为正确參考)，完整的代码请參考demo中的Interactivity目录：
class InteractivityFirstViewController: UIViewController {
lazy var interactivitySecondViewController: InteractivitySecondViewController = InteractivitySecondViewController()
lazy var customTransitionDelegate: InteractivityTransitionDelegate = InteractivityTransitionDelegate()
override func viewDidLoad() {
super.viewDidLoad()
setupView()
interactivitySecondViewController.transitioningDelegate = customTransitionDelegate
}
func interactiveTransitionRecognizerAction(sender: UIScreenEdgePanGestureRecognizer) {
if sender.state == .Began {
self.animationButtonDidClicked(sender)
}
}
func animationButtonDidClicked(sender: AnyObject) {
self.presentViewController(interactivitySecondViewController, animated: true, completion: nil)
}
}
非交互式的动画代理仅仅须要为present和dismiss提供animator就可以，可是在交互式的动画代理中。还须要为present和dismiss提供交互式动画控制器：
class InteractivityTransitionDelegate: NSObject, UIViewControllerTransitioningDelegate {
func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning?
{
return InteractivityTransitionAnimator(targetEdge: targetEdge)
}
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return InteractivityTransitionAnimator(targetEdge: targetEdge)
}
func interactionControllerForPresentation(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
{
return TransitionInteractionController(gestureRecognizer: gestureRecognizer, edgeForDragging: targetEdge)
}
func interactionControllerForDismissal(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
return TransitionInteractionController(gestureRecognizer: gestureRecognizer, edgeForDragging: targetEdge)
}
}
animator中的代码略去，它和非交互式动画中的animator类似。由于交互式的动画仅仅是一种锦上添花，它必须支持非交互式的动画，比方这个样例中。点击button依旧出发的是非交互式的动画，仅仅是手势滑动才会触发交互式动画。
class TransitionInteractionController: UIPercentDrivenInteractiveTransition {
func gestureRecognizeDidUpdate(gestureRecognizer: UIScreenEdgePanGestureRecognizer) {
switch gestureRecognizer.state {
case .Began: break
case .Changed: self.updateInteractiveTransition(self.percentForGesture(gestureRecognizer))
case .Ended:
if self.percentForGesture(gestureRecognizer) >= 0.5 {
self.finishInteractiveTransition()
}
else {
self.cancelInteractiveTransition()
}
default: self.cancelInteractiveTransition()
}
}
private func percentForGesture(gesture: UIScreenEdgePanGestureRecognizer) -> CGFloat {
let percent = 依据gesture计算得出
return percent
}
}
交互式动画是在非交互式动画的基础上实现的，我们须要创建一个继承自UIPercentDrivenInteractiveTransition类型的子类，而且在动画代理中返回这个类型的实例对象。
在这个类型中，监听手势(或者下载进度等等)的时间变化。然后调用percentForGesture方法更新动画进度就可以。
转场协调器与UIModalPresentationCustom
在进行转场动画的同一时候。您还能够进行一些同步的。额外的动画。比方文章开头gif中的第三个样例。
presentedView和presentingView能够更改自身的视图层级，加入额外的效果(阴影。圆角)。
UIKit使用转成协调器来管理这些额外的动画。您能够通过须要产生动画效果的视图控制器的transitionCoordinator属性来获取转场协调器，转场协调器仅仅在转场动画的运行过程中存在。
想要完毕gif中第三个样例的效果，我们还须要使用UIModalPresentationStyle.Custom来取代.FullScreen。
由于后者会移除fromViewController，这显然不符合需求。
当present的方式为.Custom时。我们还能够使用UIPresentationController更加彻底的控制转场动画的效果。
一个 presentation controller具备下面几个功能：
- 设置
presentedViewController的视图大小
- 加入自己定义视图来改变
presentedView的外观
- 为不论什么自己定义的视图提供转场动画效果
- 依据size class进行响应式布局
您能够觉得，. FullScreen以及其它present风格都是swift为我们实现提供好的，它们是.Custom的特例。
而.Custom同意我们更加自由的定义转场动画效果。
UIPresentationController提供了四个函数来定义present和dismiss动画開始前后的操作：
-
presentationTransitionWillBegin: present将要运行时
-
presentationTransitionDidEnd：present运行结束后
-
dismissalTransitionWillBegin：dismiss将要运行时
-
dismissalTransitionDidEnd：dismiss运行结束后
以下的代码简要描写叙述了gif中第三个动画效果的实现原理，您能够在demo的Custom Presentation目录下查看完毕代码：
class CustomPresentationFirstViewController: UIViewController {
lazy var customPresentationSecondViewController: CustomPresentationSecondViewController = CustomPresentationSecondViewController()
lazy var customPresentationController: CustomPresentationController = CustomPresentationController(presentedViewController: self.customPresentationSecondViewController, presentingViewController: self)
override func viewDidLoad() {
super.viewDidLoad()
setupView()
customPresentationSecondViewController.transitioningDelegate = customPresentationController
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func animationButtonDidClicked() {
self.presentViewController(customPresentationSecondViewController, animated: true, completion: nil)
}
}
重点在于怎样实现CustomPresentationController这个类：
class CustomPresentationController: UIPresentationController, UIViewControllerTransitioningDelegate {
var presentationWrappingView: UIView?
var dimmingView: UIView? = nil
override func presentedView() -> UIView?
{
return self.presentationWrappingView
}
}
extension CustomPresentationController {
override func presentationTransitionWillBegin() {
let transitionCoordinator = self.presentingViewController.transitionCoordinator()
self.dimmingView?.alpha = 0
transitionCoordinator?.animateAlongsideTransition({ (context: UIViewControllerTransitionCoordinatorContext) -> Void in
self.dimmingView?.alpha = 0.5
}, completion: nil)
}
override func presentationTransitionDidEnd(completed: Bool) {
if !completed {
self.presentationWrappingView = nil
self.dimmingView = nil
}
}
override func dismissalTransitionWillBegin() {
let transitionCoordinator = self.presentingViewController.transitionCoordinator()
transitionCoordinator?.animateAlongsideTransition({ (context: UIViewControllerTransitionCoordinatorContext) -> Void in
self.dimmingView?
.alpha = 0
}, completion: nil)
}
override func dismissalTransitionDidEnd(completed: Bool) {
if completed {
self.presentationWrappingView = nil
self.dimmingView = nil
}
}
}
extension CustomPresentationController {
}
除此以外，这个类还要处理子视图布局相关的逻辑。它作为动画代理，还须要为动画提供animator对象，具体代码请在demo的Custom Presentation目录下阅读。
UINavigationController转场动画
到眼下为止，全部转场动画都是适用于present和dismiss的，事实上UINavigationController也能够自己定义转场动画。两者是平行关系，非常多都能够类比过来：
class FromViewController: UIViewController, UINavigationControllerDelegate {
let toViewController: ToViewController = ToViewController()
override func viewDidLoad() {
super.viewDidLoad()
setupView()
self.navigationController.delegate = self
}
}
与present/dismiss不同的时，如今视图控制器实现的是UINavigationControllerDelegate协议，让自己成为navigationController的代理。这个协议类似于此前的UIViewControllerTransitioningDelegate协议。
FromViewController实现UINavigationControllerDelegate协议的详细操作例如以下：
func navigationController(navigationController: UINavigationController,
animationControllerForOperation operation: UINavigationControllerOperation,
fromViewController fromVC: UIViewController,
toViewController toVC: UIViewController)
-> UIViewControllerAnimatedTransitioning? {
if operation == .Push {
return PushAnimator()
}
if operation == .Pop {
return PopAnimator()
}
return nil;
}
至于animator，就和此前没有不论什么差别了。
可见，一个封装得非常好的animator，不仅能在present/dismiss时使用，甚至还能够在push/pop时使用。
UINavigationController也能够加入交互式转场动画，原理也和此前类似。
总结
对于非交互式动画，须要设置presentedViewController的transitioningDelegate属性，这个代理须要为present和dismiss提供animator。在animator中规定了动画的持续时间和表现逻辑。
对于交互式动画，须要在此前的基础上，由transitioningDelegate属性提供交互式动画控制器。在控制器中进行事件处理。然后更新动画完毕进度。
对于自己定义动画，能够通过UIPresentationController中的四个函数自己定义动画运行前后的效果。能够改动presentedViewController的大小、外观并同步运行其它的动画。
客服电话
APP下载
官方微信
请发表评论