主要是利用lottie实现tabbar切换时的动画效果,如下图所示
- 1、首先需要创建 继承自
UITabBarController
的视图控制器HomeTabBarController
- 2、pod lottie框架
- 3、添加 HomeTabBarController的子控制器视图
extension HomeTabBarController{
fileprivate func setupChildVC(){
let first = UIViewController()
first.view.backgroundColor = UIColor.yellow
let second = UIViewController()
second.view.backgroundColor = UIColor.green
let third = UIViewController()
third.view.backgroundColor = UIColor.purple
let fourth = UIViewController()
fourth.view.backgroundColor = UIColor.white
setTabbarChild(first, title: "首页", img: "tabBar_home_normal", selectImg: "tabBar_home_selected")
setTabbarChild(second, title: "通话", img: "tabBar_call_normal", selectImg: "tabBar_call_selected")
setTabbarChild(third, title: "联系人", img: "tabBar_link_normal", selectImg: "tabBar_link_selected")
setTabbarChild(fourth, title: "消息", img: "tabBar_message_normal", selectImg: "tabBar_message_selected")
}
private func setTabbarChild(_ vc: UIViewController,title: String, img: String, selectImg: String){
let vc = vc
// vc.view.backgroundColor = UIColor.white
let nvc = UINavigationController(rootViewController: vc)
nvc.tabBarItem.title = title
var image = UIImage(named: img)
image = image?.withRenderingMode(.alwaysOriginal)
nvc.tabBarItem.image = image
var selectImage = UIImage(named: img)
selectImage = selectImage?.withRenderingMode(.automatic)
nvc.tabBarItem.selectedImage = selectImage
nvc.tabBarItem.imageInsets = UIEdgeInsets(top: -1.5, left: 0, bottom: 1.5, right: 0)
self.addChild(nvc)
}
- 4、通过重写
UITabBarControllerDelegate
中的tabBarController:didSelect:
代码方法实现 tabbar切换时的动画效果
extension HomeTabBarController: UITabBarControllerDelegate{
func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
setupAnimation(tabBarController, viewController)
}
private func getAnimationViewAtTabBarIndex(_ index: Int, _ frame: CGRect)-> AnimationView{
// tabbar1 。。。 tabbar3
let view = AnimationView(name: lottieNameArr[index])
view.frame = frame
view.contentMode = .scaleAspectFill
view.animationSpeed = 1
return view
}
private func setupAnimation(_ tabBarVC: UITabBarController, _ viewController: UIViewController){
if animationView != nil {
animationView!.stop()
}
// 1. 获取当前点击的是第几个
let index = tabBarVC.viewControllers?.index(of: viewController)
var tabBarSwappableImageViews = [UIImageView]()
// 2.遍历取出所有的 tabBarButton
for tempView in tabBarVC.tabBar.subviews {
if tempView.isKind(of: NSClassFromString("UITabBarButton")!) {
//2.1 继续遍历tabBarButton 找到 UITabBarSwappableImageView 并保存
// print("tempView : \(tempView.subviews)" )
//从subviews中查找
for tempImgV in tempView.subviews {
//第一种层级关系 UITabBarButton --> UITabBarSwappableImageView
if tempImgV.isKind(of: NSClassFromString("UITabBarSwappableImageView")!) {
tabBarSwappableImageViews.append(tempImgV as! UIImageView)
}else{
//第二种:UITabBarButton --> UIVisualEffectView --> _UIVisualEffectContentView--> UITabBarSwappableImageView
let array = tempView.subviews[0].subviews[0].subviews
for tempImg in array {
if tempImg.isKind(of: NSClassFromString("UITabBarSwappableImageView")!) {
tabBarSwappableImageViews.append(tempImg as! UIImageView)
}
}
}
}
}
}
// 3. 找到当前的UITabBarButton
let currentTabBarSwappableImageView = tabBarSwappableImageViews[index!]
// 4. 获取UITabBarButton中的 UITabBarSwappableImageView 并隐藏
var frame = currentTabBarSwappableImageView.frame
frame.origin.x = 0
frame.origin.y = 0
var animation: AnimationView? = getAnimationViewAtTabBarIndex(index!, frame)
self.animationView = animation
self.animationView!.center = currentTabBarSwappableImageView.center
// 5. 创建动画 view 加载到 当前的 UITabBarButton 并隐藏 UITabBarSwappableImageView
currentTabBarSwappableImageView.superview?.addSubview( animation!)
currentTabBarSwappableImageView.isHidden = true
// 6. 执行动画,动画结束后 显示 UITabBarSwappableImageView 移除 动画 view 并置空
animation!.play(fromProgress: 0, toProgress: 1) { (finished) in
currentTabBarSwappableImageView.isHidden = false
animation!.removeFromSuperview()
animation = nil
}
}
}
在
UITabBarButton
中添加lottie的动画视图
时,需要注意的点tabBar的层级关系变化
,有以下两种层级关系
- 1、旧项目中的tabBar层级关系:从图中可以看出4个tabbar的层级关系是一致的
- 2-1、xcode11.4 新建项目的 tabbar层级关系:除了第一个item的层级关系不一致,其他3个层级关系都是一致的
- 2-2、新建项目的tabbar还有一种层级关系,不过目前并不是每次都是这样(这种层级关系目前仅出现一次)
- item0
- UIVisualEffectView
- _UIVisualEffectContentView
- UITabBarSwappableImageView
- UITabBarButtonLabel
- item1
- UIVisualEffectView
- _UIVisualEffectContentView
- UITabBarSwappableImageView
- UITabBarButtonLabel
- item2
- UIVisualEffectView
- _UIVisualEffectContentView
- UITabBarSwappableImageView
- UITabBarButtonLabel
- item3
- UIVisualEffectView
- _UIVisualEffectContentView
- UITabBarSwappableImageView
- UITabBarButtonLabel
完整代码链接 - Lottie_TabBarAnimation