項目中,產(chǎn)品想實現(xiàn)點擊底部tabbar震動效果,也沒詳細的效果參考,本人調(diào)研美團,飛豬,蘇寧等APP,梳理了下項目中常見的底部tabbar效果,如下圖所示:
效果一:

01.gif
效果二:

02.gif
效果三:

03.gif
效果四:

04.gif
效果五:

05.gif
以上五種效果都是通過iOS系統(tǒng)CAAnimation動畫實現(xiàn)的,如果這幾種動畫均不能滿足需求,還有個萬能Lottie方案( 這里需要美工提供一個json文件 ),效果如下所示:
效果六:

06.gif
這幾種效果,本質(zhì)都是通過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軸旋轉(zhuǎn)
// [AnimationHelper zaxleRotationAnimation:currentTabBarSwappableImageView];
//動畫04-Y軸位移
// [AnimationHelper yaxleMovementAnimation:currentTabBarSwappableImageView];
//動畫05-放大并保持
// [AnimationHelper zoominKeepEffectAnimation:tabBarSwappableImageViews index:index];
//動畫06-Lottie動畫
[AnimationHelper lottieAnimation:currentTabBarSwappableImageView index:index];
}