美文网首页
iOS:给标签栏控制器的UITabbarItem添加点击动效

iOS:给标签栏控制器的UITabbarItem添加点击动效

作者: 爱笑的猫mi | 来源:发表于2019-08-09 13:31 被阅读0次

    一、介绍

    现在很多app,附带很炫的点击效果,让用户享受到非常棒的体验,例如动画、渐变、音效等。

    当然,市面上大多数app的标签栏点击还是挺中规中矩的,只是切换图片而已。然而,这个是可以优化的,附带点特效能极大为app增色。

    例如音效和波动,淘宝和今日头条就是这么实现的,效果特别棒。这里实现一下UITabbarItem波动的动画。

    二、代码
    1、遍历标签栏控制器的UITabbarItem,给其每一个子视图按钮添加点击事件

       for (UIControl *tabBarButton in [UITabBarController tabBar].subviews) {
            if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")] ||
                [tabBarButton isKindOfClass:NSClassFromString(@"UIButton")]) {
                [tabBarButton addTarget:self action:@selector(tabBarButtonClick:) forControlEvents:UIControlEventTouchUpInside];
            }
        }
    

    2、在点击事件中实现波动动画

    - (void)tabBarButtonClick:(UIControl *)tabBarButton {
        for (UIView *imageView in tabBarButton.subviews) {
            if ([imageView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")] ||
                [imageView isKindOfClass:NSClassFromString(@"UIImageView")]) {
                CAKeyframeAnimation *continueAimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
                continueAimation.duration = 0.4f;
                NSMutableArray *continueValues = [NSMutableArray array];
                [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
                [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.6, 0.6, 1.0)]];
                [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)]];
                [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
                [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1.0)]];
                [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
                continueAimation.values = continueValues;
                continueAimation.removedOnCompletion = NO;
                continueAimation.fillMode = kCAFillModeForwards;
                [imageView.layer addAnimation:continueAimation forKey:nil];
            }
        }
    }
    

    相关文章

      网友评论

          本文标题:iOS:给标签栏控制器的UITabbarItem添加点击动效

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