项目中,产品想实现点击底部tabbar震动效果,也没详细的效果参考,本人调研美团,飞猪,苏宁等APP,梳理了下项目中常见的底部tabbar效果,如下图所示:
效果一:
![](https://img-blog.csdnimg.cn/img_convert/f3aa8dfab9b207cebdb1739a8b2aa1ff.gif)
01.gif
效果二:
![](https://img-blog.csdnimg.cn/img_convert/7d1b54ac5a9e9a57c9afa2c174b5a538.gif)
02.gif
效果三:
![](https://img-blog.csdnimg.cn/img_convert/6fd2b03d3fe077a73da6e375d205047f.gif)
03.gif
效果四:
![](https://img-blog.csdnimg.cn/img_convert/32b0b3505062d42d22cd0feb8a84a764.gif)
04.gif
效果五:
![](https://img-blog.csdnimg.cn/img_convert/7995288a21fce1b364eaa03e4ba5a558.gif)
05.gif
以上五种效果都是通过iOS系统CAAnimation动画实现的,如果这几种动画均不能满足需求,还有个万能Lottie方案( 这里需要美工提供一个json文件 ),效果如下所示:
效果六:
![](https://img-blog.csdnimg.cn/img_convert/06ba4b871faaa505d5fe5551e7a69bc3.gif)
06.gif
这几种效果,本质都是通过tabBar: didSelectItem:代理方法接收每次点击的item,对每个item都绑定动画效果,获取到的是item里面的UITabBarSwappableImageView
图片对象。
核心代码如下:
- (void)setAnaimationWithTabBarController:(UITabBarController *)tabBarController selectViewController:(UIViewController *)viewController {
//1.
NSInteger index = [tabBarController.viewControllers indexOfObject:viewController];
__block NSMutableArray <UIView *>*tabBarSwappableImageViews = [NSMutableArray arrayWithCapacity:4];
//2.
for (UIView *tempView in tabBarController.tabBar.subviews) {
if ([tempView isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
for (UIImageView *tempImageView in tempView.subviews) {
if ([tempImageView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {
[tabBarSwappableImageViews addObject:tempImageView];
}
}
}
}
//3.
__block UIView *currentTabBarSwappableImageView = tabBarSwappableImageViews[index];
//动画01-带重力效果的弹跳
// [AnimationHelper gravityAnimation:currentTabBarSwappableImageView];
//动画02-先放大,再缩小
// [AnimationHelper zoominTozoomoutAnimation:currentTabBarSwappableImageView];
//动画03-Z轴旋转
// [AnimationHelper zaxleRotationAnimation:currentTabBarSwappableImageView];
//动画04-Y轴位移
// [AnimationHelper yaxleMovementAnimation:currentTabBarSwappableImageView];
//动画05-放大并保持
// [AnimationHelper zoominKeepEffectAnimation:tabBarSwappableImageViews index:index];
//动画06-Lottie动画
[AnimationHelper lottieAnimation:currentTabBarSwappableImageView index:index];
}