美文网首页OC-开发案例收集
iOS-UITabbar图标点击动画效果(含Lottie动画)

iOS-UITabbar图标点击动画效果(含Lottie动画)

作者: 翀鹰精灵 | 来源:发表于2022-02-25 22:19 被阅读0次

    项目中,产品想实现点击底部tabbar震动效果,也没详细的效果参考,本人调研美团,飞猪,苏宁等APP,梳理了下项目中常见的底部tabbar效果,如下图所示:

    效果一:

    01.gif

    效果二:

    02.gif

    效果三:

    03.gif

    效果四:

    04.gif

    效果五:

    05.gif

    以上五种效果都是通过iOS系统CAAnimation动画实现的,如果这几种动画均不能满足需求,还有个万能Lottie方案( 这里需要美工提供一个json文件 ),效果如下所示:

    效果六:

    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];
    
    }
    

    DEMO下载地址

    END !

    相关文章

      网友评论

        本文标题:iOS-UITabbar图标点击动画效果(含Lottie动画)

        本文链接:https://www.haomeiwen.com/subject/nloolrtx.html