iOS 使用lottie动画自定义TabBarItem

前言

    对于自定义tabBar。我们在很多时候需要在点击tabbar按钮时会有动画效果。在动画界，有一个非常非常强大的动画框架Lottie。只要你的UI设计师给力，理论上可以实现任意动画，而且只需要几行代码。接下来是我研究的使用lottie动画来实现(也许有更简便的方式，希望留言告知)。先看一下效果

Nov-26-2019 15-46-59.gif

实现原理

    简单一句话，lottie动画的载体控件本质上是一个UIView，我们要做的就将这个UIView通过addSubView的方式加到tabBarItem上。
    为了使其位置准确，我们最理想的是将lottie的位置和大小放置的和原生的image的位置大小一致。因此我们需要找到原生的image的载体UIImageView(应该可以想象的到，原生的tabBarItem必有一个UIImageView)。
    接下来是找到这个原生的UIImageView，看代码

//这个是自定义UITabBar的layoutSubviews方法
- (void)layoutSubviews {
    [super layoutSubviews];
    
    //添加lottie的操作，只可以做一次
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        //三个lottieView
        DLLottieView *view = [DLLottieView animationWithSelectName:@"arrow_select" unselectName:@"arrow_unselect"];
        DLLottieView *view1 = [DLLottieView animationWithSelectName:@"second_select" unselectName:@"second_unselect"];
        DLLottieView *view2 = [DLLottieView animationWithSelectName:@"arrow_select" unselectName:@"arrow_unselect"];

        self.itemArr = @[view,view1,view2];

        NSInteger flag = 0;
        //遍历UITabbar的子控件
        for (UIView *barBtn in self.subviews) {
            //其中有一个子控件是UITabBarButton类型。
            if ([barBtn isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
                UIImageView *tabBarSwappableImageView = [[UIImageView alloc] init];;
                
                //在UITabBarButton的子控件中有一个UITabBarSwappableImageView类型，这就是tabBarItem用来展示图片的imageView
                for (UIView *subView in barBtn.subviews) {
                    if ([subView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {
                        tabBarSwappableImageView = (UIImageView *)subView;
                    }
                }
                
                //拿到这个imageView,给它添加lottie
                [tabBarSwappableImageView addSubview:self->_itemArr[flag]];
                
                //设置lottie的位置大小
                CGFloat width = self->_needSetBiggerItem && flag == self->_biggerItemIndex ? 52 : 32;
                CGFloat y = self->_needSetBiggerItem && flag == self->_biggerItemIndex ? 10 : 0;

                self->_itemArr[flag].frame = CGRectMake(0, 0, width, width);
                self->_itemArr[flag].center = CGPointMake(tabBarSwappableImageView.center.x, tabBarSwappableImageView.center.y - y);
                flag ++;

            }
        }
        [self playAnimationForIndex:0];
    });
}

    代码中的注释说的比较详细。总而言之就是找到原生的Imageview，给它加上LottieView,再设置上合适的大小位置。
    上面这段是核心代码，当然还有一些处理点击动画的简单方法，具体可以看demo

其他

    里面还可以顺便实现中间按钮凸出这类需求。