美文网首页
关于UITabBarController(选项卡)点击动画

关于UITabBarController(选项卡)点击动画

作者: 雨洒潇湘 | 来源:发表于2018-05-08 16:55 被阅读18次

    关于tabar

    UITabBarController管理一个按钮栏和转换视图,用于具有多个顶级模式的应用程序。
    若要在应用程序中使用,请将其视图添加到视图层次结构中,然后按顺序添加顶级视图控制器。
    大多数客户不需要子类化UITabBarController。
    如果将超过5个视图控制器添加到选项卡控制器中,只有前四个视图控制器将显示。
    其余部分将在自动生成的更多项目下访问。
    如果所有的视图控制器都是可旋转的,UITabBarController是可旋转的。
    是不是很官方,直接拿的官方翻译,😁。

    tabar点击动画原理

    原理也很简单,就是在UITabBarControllerDelegate代理方法中,找到- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item方法。在里面给每个BarButton加上动画。可以用基本动画,也可以写复杂点的动画。比如Lottie动画。虽然我没有尝试过,但我感觉京东的tabar动画点击就是用lottie写的。

    具体实现

    @interface TabBarViewController ()<UITabBarControllerDelegate >//遵循UITabBarControllerDelegate代理
    @property (nonatomic, assign)NSInteger indexFlag;//记录点击第几个BarButton
    - (void)viewDidLoad {
    self.indexFlag = 0;
    }
    - (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item {
        NSInteger index = [self.tabBar.items indexOfObject:item];
        if (index != self.indexFlag) {
    
            NSMutableArray *arry = [NSMutableArray array];
            for (UIView *btn in self.tabBar.subviews) {
                if ([btn isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
                    [arry addObject:btn];
                }
            }
            //添加基本动画
            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:1];  
            animation.toValue = [NSNumber numberWithFloat:1.2];     
            [[arry[index] layer] addAnimation:animation forKey:nil];
            self.indexFlag = index;
        }
    }
    

    这里只是贴出部分核心代码,只是做了一个放大动画的效果。

    相关文章

      网友评论

          本文标题:关于UITabBarController(选项卡)点击动画

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