经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » iOS » 查看文章
iOS自定义转场动画的几种情况
来源：jb51　　时间：2019/6/30 17:23:48　　对本文有异议

前言

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

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

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

效果图

预备

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

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

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

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

模态跳转（Present）

场景

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

实现步骤

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

需要实现的UIViewControllerTransitioningDelegate方法：

  1. //返回用于 present 的自定义 transition 动画
  2. optional func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning?
  3.  
  4. //返回用于 dismiss 的自定义 transition 动画
  5. optional func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?

实例

  1. /// 第一个 VC 中点击跳转
  2. func presentClick(_ sender: Any) {
  3.   let vc = self.storyboard?.instantiateViewController(withIdentifier: "PresentSecondViewController")
  4.   
  5.   vc?.modalPresentationStyle = .fullScreen
  6.   
  7.   vc?.transitioningDelegate = self
  8.   
  9.   self.present(vc!, animated: true) {}
  10. }
  11.  
  12. // 第一个 VC 实现协议，返回控制转场动画效果的实例
  13. extension PresentFirstViewController: UIViewControllerTransitioningDelegate {
  14.  func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  15.   return NormalPresentAnimator()
  16.  }
  17.  
  18.  func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  19.   return NormalPresentAnimator()
  20.  }
  21. }

导航控制器跳转（Push）

场景

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

实现步骤

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

需要实现的UINavigationControllerDelegate方法：

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

实例

  1. class PushFirstViewController: UIViewController {
  2.  override func viewDidLoad() {
  3.   super.viewDidLoad()
  4.   
  5.   self.navigationController?.delegate = self
  6.  }
  7.  
  8.  @IBAction func pushClick(_ sender: Any) {
  9.   let vc = self.storyboard?.instantiateViewController(withIdentifier: "PushSecondViewController")
  10.   
  11.   self.navigationController?.pushViewController(vc!, animated: true)
  12.  }
  13. }
  14. extension PushFirstViewController: UINavigationControllerDelegate {
  15.  //返回自定义过渡动画
  16.  func navigationController(_ navigationController: UINavigationController,
  17.         animationControllerFor operation: UINavigationController.Operation,
  18.         from fromVC: UIViewController,
  19.         to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  20.   if operation == .pop && fromVC is PushFirstViewController {
  21.    return nil
  22.   }
  23.   
  24.   return NormalPushAnimator()
  25.  }
  26. }

UITabbarController

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

  1. /// UIViewControllerTransitioningDelegate
  2. optional func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
  3.  
  4. optional func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
  5.  
  6. /// UINavigationControllerDelegate
  7. optional func navigationController(_ navigationController: UINavigationController,
  8.           interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

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

场景

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

实现步骤

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

实例

  1. class TabbarController: UITabBarController, UITabBarControllerDelegate {
  2.  override func viewDidLoad() {
  3.   super.viewDidLoad()
  4.  
  5.   self.delegate = self
  6. }
  7.  
  8. func tabBarController(_ tabBarController: UITabBarController,
  9.        animationControllerForTransitionFrom fromVC: UIViewController,
  10.        to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  11.   
  12.  if self.selectedIndex == 0 {
  13.   return TabbarAnimator(edge: .right)
  14.  } else {
  15.   return TabbarAnimator(edge: .left)
  16.  }
  17. }
  18.  
  19. func tabBarController(_ tabBarController: UITabBarController,
  20.        interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
  21.  if self.panGesture.state == .began || self.panGesture.state == .changed {
  22.   return TabbarInteractionTransition(pan: self.panGesture)
  23.  } else {
  24.   return nil
  25.  }
  26. }

三方框架——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。

实例

  1. /// 第一个 VC
  2. func presentClick(_ sender: Any) {
  3.  let vc = self.storyboard?.instantiateViewController(withIdentifier: "LottieSecondViewController")
  4.  
  5.  vc?.transitioningDelegate = self
  6.  
  7.  self.present(vc!, animated: true) {}
  8. }
  9.  
  10. /// 实现 UIViewControllerTransitioningDelegate，返回 LOTAnimationTransitionController 的实例
  11. extension LottieFirstViewController: UIViewControllerTransitioningDelegate {
  12.  func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  13.   
  14.   let transitionController = LOTAnimationTransitionController(animationNamed: "Count",
  15.                  fromLayerNamed: "",
  16.                  toLayerNamed: "",
  17.                  applyAnimationTransform: false)
  18.   return transitionController
  19.  }
  20.  
  21.  func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  22.   let transitionController = LOTAnimationTransitionController(animationNamed: "Three",
  23.                  fromLayerNamed: "",
  24.                  toLayerNamed: "",
  25.                  applyAnimationTransform: false)
  26.   return transitionController
  27.  }
  28. }

总结

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

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

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

iOS热门文章

  • snapkit更新约束崩溃的问题
  • iOS 14 UDP收不到广播处理
  • iOS开发用如何用类"SKStoreProductViewController"跳转AppStore点赞评分？
  • Charles抓包iPhone注意点以及SSL Proxying enabled for this host
  • 笔记：long、longlong、int、float、NSString相互转换
  • ios开发UI篇—UITextfield
  • 自定义相机碰到的问题，比如常见的拍照录制视频方向，镜像左右颠倒等问题
  • C 和 Object-C中的 #ifdef #ifndef
  • 使用Hbuilder将自己app发布到App Store（一）
  • iOS开发 - 超级签名实现之描述文件

    • iOS推荐文章

  • iOS开发基础135-Core Data
  • uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
  • 苹果支付有哪些坑，为什么苹果支付比支付宝和微信容易丢单？
  • 带你走进灵动岛
  • vue3+ts Axios封装—重复请求拦截
  • axios详解以及完整封装方法
  • 关于 axios 是什么？以及怎么用？
  • iOS气泡提示工具BubblePopup的使用
  • 一篇文章带你详细了解axios的封装 - 公众号-web前端进阶
  • [MAUI]模仿iOS多任务切换卡片滑动的交互实现

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号