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

Posted 刘星石

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于自定义转场动画,我都告诉你。相关的知识,希望对你有一定的参考价值。

概述

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

  • Push & Pop
  • Modal
  • Segue

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

Push & Pop

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

  1. 创建一个文件继承自 NSObject, 并遵守 UIViewControllerAnimatedTransitioning协议。
  2. 实现该协议的两个基本方法:
  3. 遵守 UINavigationControllerDelegate 协议,并实现此方法:

    在此方法中指定所用的 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

初始化

  • 创建两个 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 的动画。 具体的动画实现过程都在代码的注释里 :

使用动画

  • 让 ViewController 遵守 UINavigationControllerDelegate 协议。
  • 在 ViewController 中设置 NavigationController 的代理为自己:
  • 实现 UINavigationControllerDelegate 协议方法:
  • 在 ViewController 的 controllerCell 的点击方法中,发送 segue
  • 在发送 segue 的时候,把点击的 image 发送给 DetailViewController
    至此,在点击 Cell 后,就会执行刚刚自定义的动画了。接下来就要加入手势驱动。

手势驱动

  • 在 DetailViewController 的 ViewDidAppear() 方法中,加入滑动手势。
  • 在手势监听方法中,创建 UIPercentDrivenInteractiveTransition 属性,并实现手势百分比更新。
  • 实现返回 UIViewControllerInteractiveTransitioning 的方法并返回刚刚创建的 UIPercentDrivenInteractiveTransition属性。
OK,到现在,手势驱动就写好了,但是还不能使用,因为还没有实现 Pop 方法!现在自己去实现 Pop 动画吧!请参考源代码:MagicMove

Modal

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

  1. 创建一个文件继承自 NSObject, 并遵守 UIViewControllerAnimatedTransitioning协议。
  2. 实现该协议的两个基本方法:
    以上两个步骤和 Push & Pop 的自定义一样,接下来就是不同的。
  3. 如果使用 Modal 方式从一个 VC 到另一个 VC,那么需要第一个 VC 遵循 UIViewControllerTransitioningDelegate 协议,并实现以下两个协议方法:
  4. 在第一个 VC 的 prepareForSegue() 方法中,指定第二个 VC 的 transitioningDelegate 为 self。
    由 第3步 中两个方法就可以知道,在创建转场动画时,最好也创建两个动画类,一个用于 Present, 一个用于 Dismiss,如果只创建一个动画类,就需要在实现动画的时候判断是 Present 还是 Dismiss
    这时,转场动画就可以实现了,接下来就手势驱动了
  5. 在第一个 VC 中创建一个 UIPercentDrivenInteractiveTransition 属性,并且在 prepareForSegue() 方法中为第二个 VC.view 添加一个手势,用以 dismiss. 在手势的监听方法中处理方式和 Push & Pop 相同。
  6. 实现 UIViewControllerTransitioningDelegate 协议的另外两个方法,分别返回 Present 和 Dismiss 动画的百分比。





















































以上是关于关于自定义转场动画,我都告诉你。的主要内容,如果未能解决你的问题,请参考以下文章

自定义Controller转场动画

对于自定义 segue 动画,如何告诉 ViewController 它是动画的?

iOS自定义Push转场

iOS自定义Push转场

iOS自定义Push转场

iOS自定义Push转场