一、介绍
现在很多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动画不太明显，可以自己打开淘宝看看)