自定义TabBar动画效果 - 页面转场(Swift)

前言:之前写过一篇自定义TabBar动画效果的博客OC版本,本篇换成Swift来实现动画。思路大致相同,有需要可以去上篇博客中查看具体的逻辑本篇主要分享一下在Swift中核心代码和与OC中区别。

分三步:

1:初始化:

  • 初始化TabBar控制器

  • 遵守UITabBarControllerDelegate代理协议,实现代理方法

2:点击动画:

核心代码

在代理方法tabBarController - didSelect viewController中找到对应选中的tabBarButton并对其做核心动画

核心代码
/// 点击动画
func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
   
   tabBarButtonClick(tabBarButton: getTabBarButton())
   
}

private func getTabBarButton() -> UIControl {

   var tabBarButtons = Array<UIView>()
   for tabBarButton in tabBar.subviews {
       if (tabBarButton.isKind(of:NSClassFromString("UITabBarButton")!)){
           tabBarButtons.append(tabBarButton)
       }
   }
   return tabBarButtons[selectedIndex] as! UIControl
}
    
private func tabBarButtonClick(tabBarButton : UIControl) {
   
   for imageView in tabBarButton.subviews {
       if (imageView.isKind(of: NSClassFromString("UITabBarSwappableImageView")!)){
           let animation = CAKeyframeAnimation()
           animation.keyPath = "transform.scale"
           animation.duration = 0.3
           animation.calculationMode = CAAnimationCalculationMode.cubicPaced
           animation.values = [1.0,1.1,0.9,1.0]
           imageView.layer.add(animation, forKey: nil)
       }
   }
}
    

3:滑动动画:

在代理方法tabBarController - animationControllerForTransitionFrom代理方法中做滑动动画。

  • 这里可以创建一个类封装tabBarVc的滑动动画,类似如下:
/// 滑动动画
func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
   
   return DCSlideBarAnimation() //滑动动画
}

在类DCSlideBarAnimation中去实现具体滑动动画。

❗️DCSlideBarAnimation类中与OC的不同点:期初在设计OC滑动类的时候我设计一个UIRectEdge属性来告诉类我当前选中的控制器Vc和选中前控制器Vc的一个方向偏移作为滑动动画的dx。
❗️在swift中,我取消了这个属性,从而在类的内部去去通过获取当前TabVc的viewControllers的index来比较偏移方向。
相比较更建议采用第二种方法,在上传的代码中我没更改OC原来思路,可以查看源码进行对比。
核心代码
// MARK: - 代理方法
extension DCSlideBarAnimation : UIViewControllerAnimatedTransitioning{
    
    /// 设置时间间隔
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
       return 0.15
    }
        
    /// 处理转场
    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
       
       guard let fromeVc = transitionContext.viewController(forKey: .from),
             let toVc = transitionContext.viewController(forKey: .to) else { return }
       
        
       guard let tabVc = UIApplication.shared.keyWindow?.rootViewController as? UITabBarController,
             let fromeIndex = tabVc.viewControllers?.index(where: { $0 == fromeVc}),
             let toIndex = tabVc.viewControllers?.index(where: { $0 == toVc}) else { return }
       
       guard let formView = transitionContext.view(forKey: .from),
             let toView = transitionContext.view(forKey: .to) else { return }
       
       let fromFrame : CGRect = formView.frame
       let toFrame : CGRect = toView.frame
    
      
       var offSet : CGVector?
       if toIndex > fromeIndex {
           offSet = CGVector(dx: -1, dy: 0)
       }else{
           offSet = CGVector(dx: 1, dy: 0)
       }
    
       guard let animOffSet = offSet else { return }
       formView.frame = fromFrame
    
       let ofDx : CGFloat = animOffSet.dx
       let ofDy : CGFloat = animOffSet.dy
       toView.frame = CGRect.offsetBy(toFrame)(dx: toFrame.size.width * ofDx * -1, dy: toFrame.size.height * ofDy * -1)
       transitionContext.containerView.addSubview(toView)
    
       let transitionDuration = self.transitionDuration(using: transitionContext)
       UIView.animate(withDuration: transitionDuration, animations: { //动画
           
           formView.frame = CGRect.offsetBy(fromFrame)(dx: fromFrame.size.width * ofDx * 1, dy: fromFrame.size.height * ofDy * 1)
           toView.frame = toFrame;
    
       }) { (_) in
           transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
       }
    }
}

效果预览(GIF)

效果预览- 慢

OC版地址:自定义TabBar动画效果 - 页面转场

博客地址

两个版本代码的项目地址:GitHub

推荐阅读更多精彩内容

  • 山水重构作者:毛栗子规格:160×160 中国精神——第四届中国油画进京展 开幕时间:2018-07-13 15:...
    淘艺宝阅读 16评论 0 0
  • 文/林子 电视机里赵忠祥老师用独具魅力的磁性嗓音在解说自然界中食物链的游戏规则:在辽阔的非洲草原上,一只雄性的狮子...
    桑心的芝麻阅读 106评论 0 3
  • 每次看剧里人吃牛肉, 内心几乎是奔溃的。 牛肉的好吃都要溢出屏幕了, 好饿好饿,我开始吞口水了! 完全控制不住想吃...
    菊厂酒馆阅读 135评论 0 1
  • 终于把拖了很久的一件事办了,来回路上耗时4个小时。 说不清楚内心深处是什么感觉 隐隐的有一种怀疑,房奴的身份负担的...
    伊卡洛斯林阅读 45评论 0 1
  • 无意中被电影宣传片桂纶镁的反差表演所惊讶,带着好奇心来看这部影片,如名字般意外收获暖心温情,生活的真实,那...
    lomoheart阅读 44评论 0 1