美文网首页iOS入门学习
在UITabBar上实现UITabBarItem点击动画的两种方

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

作者: alextome | 来源:发表于2017-10-19 14:54 被阅读1次

    本人小白一枚,最近研究了一下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点击动画的两种方

        本文链接:https://www.haomeiwen.com/subject/nxyuuxtx.html