前言
对于自定义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
其他
里面还可以顺便实现中间按钮凸出这类需求。
