在UITabBar上实现UITabBarItem点击动画的两种方法

本人小白一枚,最近研究了一下UITabBar上实现UITabBarItem点击动画的两种办法。

一、第一种是自定义UITabBar类

通过KVC方法来替换UITabBarController中的私有、只读的属性tabBar,然后通过自定义UITabBar类的layoutSubviews函数实现对tabBar中按钮对象的遍历,加入点击响应函数,在响应函数中实现动画效果。上代码:

1 、自定义UITabBar

@interface MainTabBarView : UITabBar

2、重载MainTabBarView的layoutSubviews函数

- (void)layoutSubviews{
    [super layoutSubviews];
  
//遍历tabBarButton,添加点击动作
    for (UIControl *tabBarButton in self.subviews) {
        if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]){
            [tabBarButton addTarget:self action:@selector(tabBarButtonClick:) forControlEvents:UIControlEventTouchUpInside];
        }
    }
}

3、在MainTabBarView的tarBarButtonClick函数中添加动画效果

- (void)tabBarButtonClick:(UIControl *)tabBarButton
{
    for (UIView *imageView in tabBarButton.subviews) {
//添加动画



        }
    }
}

4、自定义UITabBarController

@interface MainTabBarViewController : UITabBarController

5、在MainTabBarViewController中定义属性mainTabBar,并懒加载

@property (nonatomic, strong) MainTabBarView *mainTabBar;
//懒加载
-(MainTabBarView *)mainTabBar{
    if(!_mainTabBar){
        _mainTabBar = [[MainTabBarView alloc] init];
    }
    return _mainTabBar;
}

6、在MainTabBarViewController的viewDidLoad函数中利用KVC将默认的tabBar替换自定义的mainTabBar

[self setValue:self.mainTabBar forKey:@"tabBar"];

二、第二种是利用UITabBarControllerDelegate代理函数直接实现

利用didSelectItem函数直接实现点击动画效果。上代码:

1、自定义UITabBarController

@interface MainTabBarViewController : UITabBarController

2、在MainTabBarViewController中添加当前点击按钮的位置标志indexFlag,并在viewDidLoad中初始化为0

//记录上一次点击tabbar,在viewDidLoad或init中初始化为0
@property (nonatomic, assign) NSInteger indexFlag;
//在viewDidLoad中初始化indexFlag
 self.indexFlag = 0;

3、在UITabBarControllerDelegate的didSelectItem函数中添加动画效果

-(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item{
     NSInteger index = [self.tabBar.items indexOfObject:item];
     if (index != self.indexFlag) {
         UIView *imageView = self.tabBar.subviews[index+1];
         if ([imageView isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
//添加动画


             
             }
 //记录当前indexFlag
         self.indexFlag = index;
     }
}

三、几种动画效果,可在第一种方法的tabBarButtonClick函数和第二种方法的didSelectItem函数中的注释 "//添加动画"下面添加

//z轴旋转180度
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//速度控制函数,控制动画运行的节奏
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//执行时间
animation.duration = 0.2;  
//执行次数     
animation.repeatCount = 1;      
![Uploading QQ20171019-145022-HD_859710.gif . . .]
animation.removedOnCompletion = YES;
//初始伸缩倍数
animation.fromValue = [NSNumber numberWithFloat:0];   
//结束伸缩倍数
animation.toValue = [NSNumber numberWithFloat:M_PI];     
[imageView layer] addAnimation:animation forKey:nil];
QQ20171019-144818-HD.gif
//向上移动
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
//速度控制函数,控制动画运行的节奏
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//执行时间
animation.duration = 0.2;
//执行次数       
animation.repeatCount = 1;      
animation.removedOnCompletion = YES;
//初始伸缩倍数
animation.fromValue = [NSNumber numberWithFloat:0];   
//结束伸缩倍数 
animation.toValue = [NSNumber numberWithFloat:-10];     
[[imageView layer] addAnimation:animation forKey:nil];
QQ20171019-144606-HD.gif
//放大效果,并回到原位
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//速度控制函数,控制动画运行的节奏
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//执行时间
animation.duration = 0.2;   
//执行次数    
animation.repeatCount = 1;   
//完成动画后会回到执行动画之前的状态   
animation.autoreverses = YES;    
//初始伸缩倍数
animation.fromValue = [NSNumber numberWithFloat:0.7];  
//结束伸缩倍数 
animation.toValue = [NSNumber numberWithFloat:1.3];     
[[imageView layer] addAnimation:animation forKey:nil];
QQ20171019-145022-HD.gif
//放大效果
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//速度控制函数,控制动画运行的节奏
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;       //执行时间
animation.repeatCount = 1;      //执行次数
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;           //保证动画效果延续
animation.fromValue = [NSNumber numberWithFloat:1.0];   //初始伸缩倍数
animation.toValue = [NSNumber numberWithFloat:1.15];     //结束伸缩倍数
[[array[index] layer] addAnimation:animation forKey:nil];
QQ20171019-145302-HD.gif

参考文件:www.jianshu.com/p/944479741d7a
www.cnblogs.com/yajunLi/p/6288811.html

你可能感兴趣的:(在UITabBar上实现UITabBarItem点击动画的两种方法)