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

概述

这篇文章,我将讲述几种转场动画的自己定义方式。而且每种方式附上一个演示样例。毕竟代码才是我们的语言。这样比較easy上手。当中主要有下面三种自己定义方法,供大家參考:

  • 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 动画的百分比。
    至此,Modal 方式的自己定义转场动画就写完了。自己在编码的时候有一些小细节须要注意。以下将展示使用 Modal 方式的自己定义动画的演示样例。

自己定义 Modal 演示样例

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


FlipTransion.gif

初始化

  • 创建两个 UIViewController, 分别命名为:FirstViewController 和 SecondViewController

    并在 Storyboard 中加入两个 UIViewController 并绑定。

  • 分别给两个视图加入两个 UIImageView。这样做的目的是为了区分两个控制器。当然你也能够给两个控制器设置不同的背景,总之你开心就好。可是,既然做,就做认真点呗。注意:假设使用图片并设置为 Aspect Fill 或者其它的 Fill。一定记得调用 imageView 的 clipsToBounds() 方法裁剪去多余的部分。

  • 分别给两个控制器加入两个button。第一个button拖线到第二个控制器,第二个控制器绑定一个方法用来dismiss。

ft_inital.png

加入 UIViewControllerAnimatedTransitioning

  • 加入一个 Cocoa Touch Class,继承自 NSObject,取名 BWFlipTransionPush(名字嘛,你开心就好。),遵守 UIViewControllerAnimatedTransitioning 协议。
  • 实现协议的两个方法。并在当中编写 Push 的动画。 详细的动画实现过程都在代码的凝视里 :

    动画的过程我就不多说了,细致看就会明确。

使用动画

  • 让 FirstViewController 遵守 UIViewControllerTransitioningDelegate 协议,并将 self.transitioningDelegate 设置为 self。

  • 实现 UIViewControllerTransitioningDelegate 协议的两个方法。用来指定动画类。
    OK。假设你完毕了Pop动画,那么如今就能够实现自己定义 Modal 转场了。

    如今仅仅差手势驱动了。

手势驱动

  • 想要同一时候实现 Push 和 Pop 手势,就须要给两个 viewController.view 加入手势。

    首先在 FirstViewController 中给自己加入一个屏幕右边的手势,在 prepareForSegue() 方法中给 SecondViewController.view 加入一个屏幕左边的手势,让它们使用同一个手势监听方法。

  • 实现监听方法,不多说,和之前一样,但还是有细致看,由于本演示样例中转场动画比較特殊,并且有两个手势,所以这里计算百分比使用的是 KeyWindow。同一时候不要忘了:UIPercentDrivenInteractiveTransition属性。
  • 实现 UIViewControllerTransitioningDelegate 协议的另外两个方法,分别返回 Present 和 Dismiss 动画的百分比。


如今,基于 Modal 的自己定义转场动画演示样例就完毕了。获取完整源码:FlipTransion

Segue

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

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

以上是 UIStoryboardSegue 类的定义。

从中能够看出,仅仅有一个方法 perform()。所以非常明显,就是重写这种方法来自己定义转场动画。

再注意它的其它属性:sourceViewController 和 destinationViewController,通过这两个属性,我们就能够訪问一个转场动画中的两个主角了,于是自己定义动画就能够随心所欲了。

仅仅有一点须要注意:在拖线的时候,注意在弹出的选项中选择 custom

然后就能够和自己定义的 UIStoryboardSegue 绑定了。

那么,问题来了,这里仅仅有 perform。那 返回时的动画怎么办呢?请往下看:

Dismiss

因为 perfrom 的方法叫做:segue,那么返回转场的上一个控制器叫做: unwind segue

  • 解除转场(unwind segue)通常和正常自己定义转场(segue)一起出现。
  • 要解除转场起作用,我们必须重写perform方法,并应用自己定义动画。

    另外,导航返回源视图控制器的过渡效果不须要和相应的正常转场同样。

其 实现步骤 为:

  • 创建一个 IBAction 方法。该方法在解除转场被运行的时候会选择地运行一些代码。这种方法能够有你想要的不论什么名字。并且不强制包括其他东西。它须要定义。但能够留空,解除转场的定义须要依赖这种方法。

  • 解除转场的创建。设置的配置。这和之前的转场创建不太一样。等下我们将看看这个是怎么实现的。
  • 通过重写 UIStoryboardSegue 子类里的 perform() 方法,来实现自己定义动画。
  • UIViewController类 提供了特定方法的定义,所以系统知道解除转场即将运行。

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

Segue 演示样例

这个演示样例是我自己写的,源码地址:SegueTransion,开门见山,直接上图。

GIF演示


SegueTransion.gif

初始化

  • 创建两个 UIViewController, 分别命名为:FirstViewController 和 SecondViewController

    并在 Storyboard 中加入两个 UIViewController 并绑定。

  • 分别给两个控制器加入背景图片或使用不同的背景色,用以区分。

    在 FirstViewController 中加入一个触发button,并拖线到 SecondViewController 中,在弹出的选项中选择custion

st_inital.png

Present

  • 加入一个 Cocoa Touch Class,继承自 UIStoryboardSegue,取名 FirstSegue(名字请任意)。并将其绑定到上一步中拖拽的 segue 上。
  • 重写 FirstSegue 中的 perform() 方法。在当中编写动画逻辑。


    还是一样。动画的过程自己看,都是非常easy的。

Present手势

这里须要注意。使用这样的方式自己定义的转场动画不能动态手势驱动,也就是说不能依据手势百分比动态改变动画完毕度。
所以。这里仅仅是简单的加入一个滑动手势(swip)。

  • 在 FisrtViewController 中加入手势:
  • 实现手势监听方法:
如今已经能够 present 了。接下来实现 dismiss

Dismiss

  • 在 FirstViewController 中加入一个 IBAction 方法。方法名能够随便,有没有返回值都随便。

  • 在 Storyboard 中选择 SecondViewController 按住 control键 拖线到 SecondViewController 的 Exit 图标。并在弹出选项中选择上一步加入 IBAction 的方法。

st_unwind.png
  • 在 Storyboard 左側的文档视图中找到上一步拖的 segue。并设置 identifier

st_unwindSegue.png
  • 再加入一个 Cocoa Touch Class,继承自 UIStoryboardSegue。取名 FirstSegueUnWind(名字请任意)。并重写其 perform() 方法,用来实现 dismiss 动画。

  • 在 FirstViewController 中重写以下方法。并依据 identifier 推断是不是须要 dismiss,假设是就返回刚刚创建的 FirstUnWindSegue
  • 最后一步。在 SecondViewController 的button的监听方法中实现 dismiss, 注意不是调用 self.dismiss...!
    给 SecondViewController 加入手势,将手势监听方法也设置为以上这种方法, 參考代码:SegueTransion

总结

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


问啊-定制化IT教育平台,牛人一对一服务,有问必答。开发编程社交头条 官方站点:www.wenaaa.com 下载问啊APP,參与官方悬赏,赚百元现金。
QQ群290551701 聚集非常多互联网精英,技术总监,架构师,项目经理!开源技术研究,欢迎业内人士,大牛及新手有志于从事IT行业人员进入!


原文地址:https://www.cnblogs.com/gccbuaa/p/7149034.html