点击UITabBarItem动画

在开发中遇到要在点击TabbarItem有动画展示，显得更有格调，查找了很多资料，再加上自己的思路，终于实现如下效果

TabBarItme.gif

本来想过自定义TabBarItem，但感觉影响太大，所以就只是在原生TabBar的基础上，获取展示图片的View，给这个View添加动画效果

• 知识点1、获取TabbarItem中显示图片的View
• 知识点2、替换原生的UITabBar（UItabbarController中替换）
• 知识点3、获取之前选中的TabBarItem索引，以及马上要选中的TabBarItem的索引（在delegate的方法中实现）
• 知识点4、在不是点击，在用代码调用self.selectTabIndex = 1也能响应（方法参考我之前的一篇文章selectTabIndex与点击一致）

具体实现代码如下：

@interface LVTabBar : UITabBar
/**
 点击item时的变化

 @param tabBarController TabBarController
 @param viewController 解决显示的Controller
 */
+ (void)changeSelectBarItemWithTabBarController:(UITabBarController *)tabBarController willShowController:(UIViewController *)viewController;


/**
 初始化自定义的UITabbar
 */
+ (void)setupLVTabBarWithTabBarController:(UITabBarController *)tabBarController;
@end

#import "LVTabBar.h"
@interface LVTabBar()
@property (nonatomic,strong) NSMutableArray * tabImageArrayM;
@end

@implementation LVTabBar

- (void)layoutSubviews{
    [super layoutSubviews];
    for (UIControl *tabBarButton in self.subviews) {
        if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
            
            for (UIView *imageView in tabBarButton.subviews) {
                if ([imageView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {
                    [self.tabImageArrayM removeObject:imageView];
                    [self.tabImageArrayM addObject:imageView];
                }
            }

        }
    }
}
/**
 点击item时的变化
 
 @param tabBarController TabBarController
 @param viewController 解决显示的Controller
 */
+ (void)changeSelectBarItemWithTabBarController:(UITabBarController *)tabBarController willShowController:(UIViewController *)viewController
{
    NSInteger lastIndex = tabBarController.selectedIndex;
    NSInteger currentIndex = [tabBarController.childViewControllers indexOfObject:viewController];
    // 两次点击同一个不做动画效果处理
    if (lastIndex == currentIndex) {
        return ;
    }
    LVTabBar *tabBar = (LVTabBar *)tabBarController.tabBar;
    if ([tabBar isKindOfClass:[LVTabBar class]]) {
        [tabBar changeSelectBarItemAtLastIndex:lastIndex currentIndex:currentIndex];
    }
}
/**
 点击item时的变化
 
 @param lastIndex 之前显示的item索引
 @param currentIndex 解决显示的item所以
 */
- (void)changeSelectBarItemAtLastIndex:(NSInteger)lastIndex currentIndex:(NSInteger)currentIndex
{
    if (self.tabImageArrayM.count > lastIndex && lastIndex>=0) {
        UIView *lastImageView = self.tabImageArrayM[lastIndex];
        //需要实现的帧动画,这里根据需求自定义
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
        animation.keyPath = @"transform.scale";
        animation.values = @[@1.0,@0.9,@1.15,@0.95,@1.02,@1.0];
        animation.duration = 0.5;
        animation.calculationMode = kCAAnimationCubic;
        //把动画添加上去就OK了
        [lastImageView.layer addAnimation:animation forKey:nil];
    }
    if (self.tabImageArrayM.count > currentIndex && currentIndex>=0) {
        UIView *currentImageView = self.tabImageArrayM[currentIndex];
        //需要实现的帧动画,这里根据需求自定义
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
        animation.keyPath = @"transform.scale";
        animation.values = @[@1.0,@0.9,@1.15,@0.95,@1.02,@1.0];
        animation.duration = 0.8;
        animation.calculationMode = kCAAnimationCubic;
        //把动画添加上去就OK了
        [currentImageView.layer addAnimation:animation forKey:nil];
    }
}
+ (void)setupLVTabBarWithTabBarController:(UITabBarController *)tabBarController
{
    LVTabBar *myTabBar = [[LVTabBar alloc] init];
    [tabBarController setValue:myTabBar forKey:@"tabBar"];
}
- (NSMutableArray *)tabImageArrayM
{
    if (_tabImageArrayM == nil) {
        _tabImageArrayM = [NSMutableArray array];
    }
    return _tabImageArrayM;
}
@end

调用只有3步，具体调用demo如下：

@interface LVMainViewController () <UITabBarControllerDelegate>

@end

@implementation LVMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 1、替换原生TabBar
    [LVTabBar setupLVTabBarWithTabBarController:self];
    // 2、设置代理
    self.delegate = self;
    
    [self setCustomTabBar];
}
- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
{
    // 3、点击动画
    [LVTabBar changeSelectBarItemWithTabBarController:tabBarController willShowController:viewController];
    return YES;
}



-(void) setCustomTabBar {
    
    [self addChildVc:[ViewController new] title:@"首页" image:@"tab_home_unselect" selectedImage:@"tab_home_select"];
    [self addChildVc:[ViewController new] title:@"名师看盘" image:@"tab_liveroom_unselect" selectedImage:@"tab_liveroom_select"];
    [self addChildVc:[ViewController new] title:@"我的" image:@"tab_mine_unselect" selectedImage:@"tab_mine_select"];
    
}
- (void)addChildVc:(UIViewController *)childVc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
{
    childVc.title = title;
    childVc.tabBarItem = [[UITabBarItem alloc] initWithTitle:title image:[[UIImage imageNamed:image] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] selectedImage:[[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
    NSDictionary * dict = @{NSFontAttributeName:[UIFont fontWithName:@"PingFangSC-Light" size:10],NSForegroundColorAttributeName:[UIColor colorWithHexString:@"323232"]};
    [[UITabBarItem appearance] setTitleTextAttributes:dict forState:UIControlStateNormal];
    
    UINavigationController *navigationVc = [[UINavigationController alloc] initWithRootViewController:childVc];
    [self addChildViewController:navigationVc];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end