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

项目中,产品想实现点击底部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 !

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值