iOS自定义转场动画的几种情况

前言

在开发中,无论我们使用 Push 还是 Present 推出新的 ViewController 时,系统为了提高用户体验都会为我们默认加上一些过渡动画。但是,系统默认的动画总是不能满足大家各种各样的需求的,所以系统也为我们提供了在不同场景下自定义过渡动画以及通过手势控制过渡进度的实现方案。

这篇文章记录了自定义转场动画中的几种情况:

  • 模态跳转(Present)
  • 导航控制器跳转(Push)
  • UITabbarController
  • 三方框架——Lottie

效果图

预备

首先,我们现在介绍几个在自定义转场动画时需要接触的协议:

  • UIViewControllerAnimatedTransitioning: 实现此协议的实例控制转场动画效果。
  • UIViewControllerInteractiveTransitioning: 实现此协议的实例控制着利用手势过渡时的进度处理。

我们在定义好了实现上面两个协议的类后,只需要在需要进行转场的地方,提供对应的对象即可。

ps:下面的实例中,请大家忽略动画效果,关注实现。(其实是懒得去写太多动画了。🤦‍♂️)

模态跳转(Present)

场景

self.present(vc!, animated: true) {}
self.dismiss(animated: true) {} 

实现步骤

  1. 设置将要 present 的 ViewController 的 transitioningDelegate 对象,此对象是实现协议 UIViewControllerTransitioningDelegate 的实例。
  2. 实现 UIViewControllerTransitioningDelegate 协议中的几个代理方法,返回实现了 UIViewControllerAnimatedTransitioning 协议的动画效果控制类。

需要实现的UIViewControllerTransitioningDelegate方法:

//返回用于 present 的自定义 transition 动画
optional func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning?

//返回用于 dismiss 的自定义 transition 动画
optional func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?

实例

/// 第一个 VC 中点击跳转
func presentClick(_ sender: Any) {
  let vc = self.storyboard?.instantiateViewController(withIdentifier: "PresentSecondViewController")

  vc?.modalPresentationStyle = .fullScreen

  vc?.transitioningDelegate = self

  self.present(vc!, animated: true) {}
}

// 第一个 VC 实现协议,返回控制转场动画效果的实例
extension PresentFirstViewController: UIViewControllerTransitioningDelegate {
 func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  return NormalPresentAnimator()
 }

 func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  return NormalPresentAnimator()
 }
}

导航控制器跳转(Push)

场景

self.navigationController?.pushViewController(vc!, animated: true)
self.navigationController?.popViewController(animated: true)

实现步骤

  1. 设置导航控制器 UINavigationController 的 delegate。
  2. 实现 UINavigationControllerDelegate 协议中的代理方法,返回实现了 UIViewControllerAnimatedTransitioning 协议的动画效果控制类。

需要实现的UINavigationControllerDelegate方法:

optional func navigationController(_ navigationController: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from fromVC: UIViewController,
        to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?

实例

class PushFirstViewController: UIViewController {
 override func viewDidLoad() {
  super.viewDidLoad()

  self.navigationController?.delegate = self
 }

 @IBAction func pushClick(_ sender: Any) {
  let vc = self.storyboard?.instantiateViewController(withIdentifier: "PushSecondViewController")

  self.navigationController?.pushViewController(vc!, animated: true)
 }
}
extension PushFirstViewController: UINavigationControllerDelegate {
 //返回自定义过渡动画
 func navigationController(_ navigationController: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from fromVC: UIViewController,
        to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  if operation == .pop && fromVC is PushFirstViewController {
   return nil
  }

  return NormalPushAnimator()
 }
}

UITabbarController

在前面的两个专场实现中,我们在需要转场的类中分别实现了UIViewControllerTransitioningDelegate 及 UINavigationControllerDelegate 方法,在这两个协议中,还有这样几个方法:

/// UIViewControllerTransitioningDelegate
optional func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

optional func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

/// UINavigationControllerDelegate
optional func navigationController(_ navigationController: UINavigationController,
          interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

上面这几个方法呢?其实就是我们通过利用手势转场时过渡的进度处理方法。我们需要在代理方法中返回一个实现了 UIViewControllerInteractiveTransitioning 协议的对象来对转场进度进行控制。下面的 UITabbarController 中我就实现一个利用手势控制转场的例子。 Present 及 Push/Pop 按照相同的思路实现即可。

场景

UITabbarController 在默认的状态下,切换控制器时是没有动画效果的。如果需要动画效果的话,需要我们进行自定义。

实现步骤

  1. 设置 UITabbarController 的 delegate。
  2. 实现 UITabBarControllerDelegate 协议中的代理方法,返回实现了 UIViewControllerAnimatedTransitioning 协议的动画效果控制类,以及返回实现了 UIViewControllerInteractiveTransitioning 协议的转场进度控制类。
/// 返回实现了 UIViewControllerAnimatedTransitioning 协议的实例
func tabBarController(_ tabBarController: UITabBarController,
       animationControllerForTransitionFrom fromVC: UIViewController,
       to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?

/// 返回实现了 UIViewControllerInteractiveTransitioning 协议的实例
func tabBarController(_ tabBarController: UITabBarController,
       interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

实例

class TabbarController: UITabBarController, UITabBarControllerDelegate {
 override func viewDidLoad() {
  super.viewDidLoad()

  self.delegate = self
}

func tabBarController(_ tabBarController: UITabBarController,
       animationControllerForTransitionFrom fromVC: UIViewController,
       to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {

 if self.selectedIndex == 0 {
  return TabbarAnimator(edge: .right)
 } else {
  return TabbarAnimator(edge: .left)
 }
}

func tabBarController(_ tabBarController: UITabBarController,
       interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
 if self.panGesture.state == .began || self.panGesture.state == .changed {
  return TabbarInteractionTransition(pan: self.panGesture)
 } else {
  return nil
 }
}

三方框架——Lottie

介绍

Lottie 是 Android 和 iOS 的移动库,用 bodymovin 解析 Adobe After Effects 导出为 json 的动画并在移动设备上生成矢量动画。设计师可以轻松的创建漂亮(复杂)的动画,无需程序员辛苦地手动去创建及调试。

场景

实现一些特殊的转场,且程序员无足够时间调试动画时。

实现步骤

  1. 在工程中导入 Lottie 框架。
  2. 在需要转场的类中,将 Lottie import。
  3. 因为 Lottie 实现的转场实际上是 Present 的转场,所以设置将要 Present 的控制器的 transitioningDelegate。
  4. 实现 UIViewControllerTransitioningDelegate 协议中的几个代理方法,返回利用转场动画 json 文件初始化的 LOTAnimationTransitionController 的实例。

ps:Lottie 转场的 LOTAnimationTransitionController 在 3.0.0 版本后被移除,所以需要使用 Lottie 做转场时,需要在导入时,指定版本号为更早的版本。我这里使用的是 2.5.3。

实例

/// 第一个 VC
func presentClick(_ sender: Any) {
 let vc = self.storyboard?.instantiateViewController(withIdentifier: "LottieSecondViewController")

 vc?.transitioningDelegate = self

 self.present(vc!, animated: true) {}
}

/// 实现 UIViewControllerTransitioningDelegate,返回 LOTAnimationTransitionController 的实例
extension LottieFirstViewController: UIViewControllerTransitioningDelegate {
 func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {

  let transitionController = LOTAnimationTransitionController(animationNamed: "Count",
                 fromLayerNamed: "",
                 toLayerNamed: "",
                 applyAnimationTransform: false)
  return transitionController
 }

 func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  let transitionController = LOTAnimationTransitionController(animationNamed: "Three",
                 fromLayerNamed: "",
                 toLayerNamed: "",
                 applyAnimationTransform: false)
  return transitionController
 }
}

总结

上面的所有动画的示例可以在我的Github上找到哦,各位前快去下载把玩吧。

好的转场动画,在用户交互上会带来更加美妙的体验。让用户尽享丝滑哦。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

时间: 2019-06-27

iOS如何自定义控制器转场动画push详解

前言 最近有些空闲时间,整理了下最近做的项目,本文主要介绍了关于iOS自定义控制器转场动画push的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 效果图: iOS7 开始苹果推出了自定义转场的 API .从此,任何可以用 CoreAnimation 实现的动画,都可以出现在两个 ViewController 的切换之间.并且实现方式高度解耦,这也意味着在保证代码干净的同时想要替换其他动画方案时只需简单改一个类名就可以了,真正体会了一把高颜值代码带来的愉悦感. 其实网

IOS实战之自定义转场动画详解

转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现.隐藏视图.如果用到了navigationController,还可以调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈.弹栈. 下图中所有转场动画都是自定义的动画,这些效果如果不用自定义动

IOS轻松几步实现自定义转场动画

一.系统提供的转场动画 目前,系统给我们提供了push/pops和present/dismiss两种控制器之间跳转方.当然,通过设置UIModalTransitionStyle属性,可以实现下面4种modal效果,相信大家都比较熟悉了,这里就不再展示效果图. UIModalTransitionStyleCoverVertical // 从下往上, UIModalTransitionStyleFlipHorizontal // 水平翻转 UIModalTransitionStyleCrossDis

深入学习iOS7自定义导航转场动画

在iOS7以前,开发者如果希望定制导航控制器推入推出视图时的转场动画,一般都只能通过子类化UINavigationController或者自己编写动画代码去覆盖相应的方法,现在iOS7为开发者带来了福音,苹果公司引入了大量新API,给予了开发者很高的自由度,在处理由UIViewController管理的UIView动画时,这些API使用方便,可扩展性也很强,定制起来非常轻松: 全新的针对UIView的动画block方法 全新的UIViewControllerAnimatedTransitioni

学习iOS自定义导航控制器UINavigationController

自定义导航控制器: 将导航控制器中通用的部分拿出来统一设置 1.一般导航条标题的字体setTitleTextAttribute和背景颜色setBackgroundImage都是统一的,可以在load方法中使用appearanceWhenContainedIn统一设置 2.一般导航条的返回按钮需要自定义,一般除了栈底控制器有导航条,其他控制器都需要隐藏底部的条,可以重写pushViewController:animated:方法,在该方法中实现该功能 3.导航控制器右滑返回效果(触摸屏幕的任意一点

iOS Swift控制器转场动画示例代码

前言 在IOS开发中,我们model另外一个控制器的时候,一般都使用默认的转场动画.本文将给大家详细介绍关于iOS Swift控制器转场动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 返回效果也可更改 四种转场动画 1. move:源图片位置移动到目标图片位置: 2. circle:根据源控件大小创建圆形或者椭圆形path路径,放大展示目标: 3. tier:源左右,目标由小到大缩放: 4. middle:源的中心点开始放大,返回是缩回到中心. 代码解析 给UI

IOS登录页面动画、转场动画开发详解

动画效果 需求分析 分析方法 下载这个gif动图,用mac默认的打开方式打开这个gif图(双击图片即可),效果如下 鼠标选中红色箭头所指的位置,然后按住键盘方向键下键,图片会以缓慢的可控的速度播放,便于分析动画的构成. 小tips:macos系统想正常浏览一个gif动图,可以鼠标单击图片后按空格,也可以选择用浏览器打开,gif图会以正常速度播放. 技术点分析 如何生成一个动画让控件执行? 现流行的方式主要有三种: 1.基本动画 2.核心动画 3.三方框架--POP框架(由Facebook开发)

iOS swift实现转场动画的方法示例

转场动画介绍 转场动画在我们日常开发中是经常遇到的,所谓转场动画,就是一个控制器的view切到另一个控制器的view上过程中过的动画效果.本例子是实现了在导航控制器的titleView边上慢慢弹出一个控制器.下面话不多说,来一起看看详细的介绍: 效果图: 专场前 专场后 示例代码 首先自定义一个animator类.在需要转场的控制器内,设置代理 //需要设置转场动画的控制器titleViewVc.transitioningDelegate = aniamator//这里的animator是ani

iOS实现类似格瓦拉电影的转场动画

用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下 自定义转场动画 首先就要声明一个遵守UIViewControllerAnimatedTransitioning协议的类. 然后实现协议中的两个函数 // This is used for percent driven interactive transitions, as well as for container controllers that have companion animati