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

01.gif
效果二:

02.gif
效果三:

03.gif
效果四:

04.gif
效果五:

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

06.gif
這幾種效果,本質(zhì)都是通過(guò)tabBar: didSelectItem:代理方法接收每次點(diǎn)擊的item,對(duì)每個(gè)item都綁定動(dòng)畫效果,獲取到的是item里面的UITabBarSwappableImageView圖片對(duì)象。
核心代碼如下:
- (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];
//動(dòng)畫01-帶重力效果的彈跳
// [AnimationHelper gravityAnimation:currentTabBarSwappableImageView];
//動(dòng)畫02-先放大,再縮小
// [AnimationHelper zoominTozoomoutAnimation:currentTabBarSwappableImageView];
//動(dòng)畫03-Z軸旋轉(zhuǎn)
// [AnimationHelper zaxleRotationAnimation:currentTabBarSwappableImageView];
//動(dòng)畫04-Y軸位移
// [AnimationHelper yaxleMovementAnimation:currentTabBarSwappableImageView];
//動(dòng)畫05-放大并保持
// [AnimationHelper zoominKeepEffectAnimation:tabBarSwappableImageViews index:index];
//動(dòng)畫06-Lottie動(dòng)畫
[AnimationHelper lottieAnimation:currentTabBarSwappableImageView index:index];
}