锻炼吃饭的家伙ios进阶iOS开发Swift

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

2015-07-14  本文已影响35956人  伯恩的遗产

概述

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

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

Push & Pop

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

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

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

    //指定转场动画持续的时长
func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval      
//转场动画的具体内容       
func animateTransition(transitionContext: UIViewControllerContextTransitioning)

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

    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 已经集成了相关方法，我们只用告诉它百分比就可以了。所以下一步就是 手势驱动。

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

  5. 实现 UINavigationControllerDelegate 中的另一个返回 UIViewControllerInteractiveTransitioning 的方法，并在其中返回 第4步 创建的 UIPercentDrivenInteractiveTransition 属性。

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

自定义 Push & Pop 示例

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

MagicMove.gif

初始化

mm_inital.png

添加 UIViewControllerAnimatedTransitioning

使用动画

手势驱动

OK，到现在，手势驱动就写好了，但是还不能使用，因为还没有实现 Pop 方法！现在自己去实现 Pop 动画吧！请参考源代码：MagicMove

Modal

modal转场方式即使用 presentViewController() 方法推出的方式，默认情况下，第二个视图从屏幕下方弹出。下面就来介绍下 modal 方式转场动画的自定义。

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

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

    //指定转场动画持续的时长
func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval      
//转场动画的具体内容       
func animateTransition(transitionContext: UIViewControllerContextTransitioning)
    以上两个步骤和 Push & Pop 的自定义一样，接下来就是不同的。

  3. 如果使用 Modal 方式从一个 VC 到另一个 VC，那么需要第一个 VC 遵循 UIViewControllerTransitioningDelegate 协议，并实现以下两个协议方法：

    //present动画
optional func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning?

//dismiss动画
optional func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?

  4. 在第一个 VC 的 prepareForSegue() 方法中，指定第二个 VC 的 transitioningDelegate 为 self。

    由 第3步 中两个方法就可以知道，在创建转场动画时，最好也创建两个动画类，一个用于 Present， 一个用于 Dismiss，如果只创建一个动画类，就需要在实现动画的时候判断是 Present 还是 Dismiss。
    这时，转场动画就可以实现了，接下来就手势驱动了

  5. 在第一个 VC 中创建一个 UIPercentDrivenInteractiveTransition 属性，并且在 prepareForSegue() 方法中为第二个 VC.view 添加一个手势，用以 dismiss. 在手势的监听方法中处理方式和 Push & Pop 相同。

  6. 实现 UIViewControllerTransitioningDelegate 协议的另外两个方法，分别返回 Present 和 Dismiss 动画的百分比。

    //百分比Push
func interactionControllerForPresentation(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
    return self.percentDrivenTransition
}
//百分比Pop
func interactionControllerForDismissal(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
    return self.percentDrivenTransition
}
    至此，Modal 方式的自定义转场动画就写完了。自己在编码的时候有一些小细节需要注意，下面将展示使用 Modal 方式的自定义动画的示例。

自定义 Modal 示例

此示例和上面一个示例一样，来自 Kitten Yang 的blog 实现3D翻转效果，我也将其用 Swift 实现了一遍，同样我的源代码地址：FlipTransion，运行效果如下：

FlipTransion.gif

初始化

ft_inital.png

添加 UIViewControllerAnimatedTransitioning

使用动画

手势驱动

现在，基于 Modal 的自定义转场动画示例就完成了。获取完整源代码：FlipTransion

Segue

这种方法比较特殊，是将 Stroyboard 中的拖线与自定义的 UIStoryboardSegue 类绑定自实现定义转场过程动画。

首先我们来看看 UIStoryboardSegue 是什么样的。

@availability(iOS, introduced=5.0)
class UIStoryboardSegue : NSObject {
    
    // Convenience constructor for returning a segue that performs a handler block in its -perform method.
    @availability(iOS, introduced=6.0)
    convenience init(identifier: String?, source: UIViewController, destination: UIViewController, performHandler: () -> Void)
    
    init!(identifier: String?, source: UIViewController, destination: UIViewController) // Designated initializer
    
    var identifier: String? { get }
    var sourceViewController: AnyObject { get }
    var destinationViewController: AnyObject { get }
    
    func perform()
}

以上是 UIStoryboardSegue 类的定义。从中可以看出，只有一个方法 perform()，所以很明显，就是重写这个方法来自定义转场动画。

再注意它的其他属性：sourceViewController 和 destinationViewController，通过这两个属性，我们就可以访问一个转场动画中的两个主角了，于是自定义动画就可以随心所欲了。

只有一点需要注意：在拖线的时候，注意在弹出的选项中选择 custom。然后就可以和自定义的 UIStoryboardSegue 绑定了。

那么，问题来了，这里只有 perform，那 返回时的动画怎么办呢？请往下看：

Dismiss

由于 perfrom 的方法叫做：segue，那么返回转场的上一个控制器叫做： unwind segue

其 实现步骤 为：

当然，这么说有一些让人琢磨不透，不知道什么意思。那么，下面再通过一个示例来深入了解一下。

Segue 示例

这个示例是我自己写的，源代码地址：SegueTransion，开门见山，直接上图。

GIF演示

SegueTransion.gif

初始化

st_inital.png

Present

Present手势

这里需要注意，使用这种方式自定义的转场动画不能动态手势驱动，也就是说不能根据手势百分比动态改变动画完成度。
所以，这里只是简单的添加一个滑动手势（swip）。

现在已经可以 present 了，接下来实现 dismiss。

Dismiss

st_unwind.png st_unwindSegue.png

总结

一张图总结一下3种方法的异同点。

总结.png

到这里，终于吧3中方法的自定义都写完了，写这篇 blog 花了我一天的时间！希望我自己和看过的同学都能记住！同时，有错误的地方欢迎提出。

上一篇 下一篇

猜你喜欢

热点阅读