码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-11-12 20:01:18      阅读:432      评论:0      收藏:0      [点我收藏+]

标签:ios   ati   图片   遍历   object   pat   标签   skin   width   

一、介绍

现在很多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];
        }
    }
}

 

三、效果 (参看淘宝的就行,gif动画不太明显,可以自己打开淘宝看看)

技术分享图片

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

标签:ios   ati   图片   遍历   object   pat   标签   skin   width   

原文地址:https://www.cnblogs.com/XYQ-208910/p/9948298.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!