iOS-UITabbar圖標(biāo)點(diǎn)擊動(dòng)畫效果(含Lottie動(dòng)畫)

項(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];

}

DEMO下載地址

END !

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容