[CN]如何一行代码实现Lottie动画TabBar [EN]How to add animation of Lottie with one line of code

[ChenYilong]

[CN]CYLTabBarController【一行代码实现 Lottie 动画 TabBar】

[EN]CYLTabBarController [An animated tabBar supported by Lottie with one line of code]

---

[CN]v1.24.1 版本添加了Lottie动画支持，可以最少添加一行代码，就可支持 Lottie 动画 TabBar：
[EN]In version of v1.24.1, CYLTabBarController supports to add animation of Lottie with one line of code.

[CN]一行代码说明： 一个 TabBarItem 只设置一个键值 CYLTabBarLottieURL 即可支持。四个 TabBarItem 那就是四行代码。
[EN]what does one line of code mean: If your TabBar is only conposed of one TabBarItem, you only need to assign a value to the key named CYLTabBarLottieURL . If it is conposed of four number of TabBarItems, you should add four lines of code.

[CN]具体用法见：
[EN]How to use it:

[CN]初始化时将以下两个值赋值即可：
[EN]Assign a values to keys listed here:

[CN]对比 [EN]Comparation	key1	key2
key	CYLTabBarLottieURL	CYLTabBarLottieSize
type of value	NSURL	NSValue
meaning of value	[CN]lottie 所在路径 path of resource	[CN]LottieView大小 size of LottieView
attention	[CN]必填 required	[CN]选填 [EN] optional
other	[CN]根据此键值判断是否开启Lottie动画功能 [EN]CYLTabBarController will evaluate in this key whether the animation should be added	[CN]选填，如果未传入了，会首先取 CYLTabBarItemImage对应view的size，如果未传入，则会在内部取一个固定的缺省值。 [EN]This key is optional, if you donot assign any value to it, CYLTabBarController will try to assign the size of value of CYLTabBarItemImage. However if the value of CYLTabBarItemImage is null, CYLTabBarController will assign a default value to it.

[CN]代码演示：
[EN]Show case:

update Podfile:

//Podfile
#pod 'CYLTabBarController', '~> 1.24.1'        # [CN]默认不依赖Lottie [EN]Do not depend on lottie by default
pod 'CYLTabBarController/Lottie', '~> 1.24.1' # [CN]依赖Lottie库 [EN] Depend on lottie 

code:

       NSBundle *bundle = [NSBundle bundleForClass:[MainTabBarController class]];
   NSDictionary *firstTabBarItemsAttributes = @{
                                                CYLTabBarLottieURL : [NSURL fileURLWithPath:[bundle pathForResource:@"tab_home_animate" ofType:@"json"]],
                                                // CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(22, 22)]//选填，设置LottieView大小
                                                };
   NSDictionary *secondTabBarItemsAttributes = @{
                                                 CYLTabBarLottieURL : [NSURL fileURLWithPath:[bundle pathForResource:@"tab_search_animate" ofType:@"json"]],
                                                 // CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(22, 22)]//选填，设置LottieView大小
                                                 };

   NSArray *tabBarItemsAttributes = @[
                                      firstTabBarItemsAttributes,
                                      secondTabBarItemsAttributes,
                                      ];

   CYLTabBarController *tabBarController = [CYLTabBarController tabBarControllerWithViewControllers:self.viewControllers
                                                                              tabBarItemsAttributes:self.tabBarItemsAttributesForController
                                                                                        imageInsets:imageInsets
                                                                            titlePositionAdjustment:titlePositionAdjustment
                                                                                            context:nil
                                            ];

---

Posted by Posted by 微博@iOS程序犭袁 & 公众号@iTeaTime技术清谈
原创文章，版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

[ChenYilong]

[CN]v1.24.1 之前的版本，或者想自己实现Lottie，可以参考有一位开发者的做法：
[EN]Before the version of v1.24.1, or in case that you want to add animation of Lottie by yourself, you can use the way followed which is provided by a user of CYLTabBarController:

you can do like this：

do with the delegate ：

- (void)tabBarController:(UITabBarController *)tabBarController didSelectControl:(UIControl *)control {
/**
在选中tabbar的那个回调中，增加动画，
获取了UITabBarButton，
然后将动画的那个LOTAnimationView加在了UITabBarSwappableImageView的位置，
开始动画就隐藏了UITabBarSwappableImageView，
等动画完成了，就移除动画，显示UITabBarSwappableImageView
*/
}

you can find this delegate in demo file AppDelegate.m.

#pragma mark - Tab Animation
- (void)showTabBarAnimation {
   NSUInteger selectedIndex = self.selectedIndex ?: 0;
   if (selectedIndex == self.lastAnimationIndex) {
       return;
   }
   self.lastAnimationIndex = selectedIndex;
   NSString *selectedTitle = [@[@"firstTab", @"secondTab", @"thirdTab"] objectAtIndex:selectedIndex];
   NSArray *jsonRescources = @[@"lottie_tab_firstTab", @"lottie_tab_secondTab", @"lottie_tab_thirdTab"];
   NSArray<UIView *> *views = self.tabBar.subviews;
   for (int i = 0; i < views.count; i++) {
       UIView *view = views[i];
       if ([view isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
           NSArray<UIView *> *subViews = view.subviews;
           
           BOOL isSelected = NO;
           UIView *animationView;
           for (UIView *subView in subViews) {
               if ([subView isKindOfClass:NSClassFromString(@"UITabBarButtonLabel")]) {
                   NSString *title = [subView valueForKey:@"text"];
                   isSelected = [selectedTitle isEqualToString:title];
               } else if ([subView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {
                   animationView = subView;
               }
           }
           if (isSelected) {
               animationView.hidden = YES;
               //addAnimation
               LOTAnimationView *animation = [LOTAnimationView animationNamed:[jsonRescources objectAtIndex:self.selectedIndex]];
               animation.frame = animationView.frame;
               [view addSubview:animation];
               [animation playWithCompletion:^(BOOL animationFinished) {
                   animationView.hidden = NO;
                   [animation stop];
                   [animation removeFromSuperview];
               }];
           } else {
               //remove animation
               for (UIView *sub in view.subviews) {
                   if ([sub isKindOfClass:[LOTAnimationView class]]) {
                       [(LOTAnimationView *)sub stop];
                       [sub removeFromSuperview];
                   }
               }
           }
       }
   }
   
}

[啾啾酱]

后续集成势必要引入lottie，像我这种纯oc项目，140多m的，又不想使用lottie的，一旦引入swift就要超150m😂

[HolmesZhao]

这个为了方便大佬可以单独写一个 category 么, 这样别的地方使用 lottie 的时候一行代码创建就好了😂 省的自己再写一份, 免得代码冗余

[ChenYilong]

后续集成势必要引入lottie，像我这种纯oc项目，140多m的，又不想使用lottie的，一旦引入swift就要超150m😂

Lottie项目2.5.x之前用 Objective-C 实现的，之后的版本使用Swift实现的，目前CYLTabBarController依赖的是Objective-C版本。

[ChenYilong]

Lottie官网有很多，动画文件，可以直接导出json，稍微改造下就能使用。
https://lottiefiles.com/recent

版权协议 https://lottiefiles.com/page/license
CC协议，（Creative Commons license）非常宽松
Files can be used for commercial usage within Applications

[korea1501541730]

XR iOS 13 release版本 动画一直刷CPU%。app直接挂了。又遇到的吗？

[tuzhengyao]

OC版本库在哪里？

[冷羽]

设置了 [self.cyl_tabBarController setSelectedIndex:2]; lottie动画的选中没有切换？

[ChenYilong]

设置了 [self.cyl_tabBarController setSelectedIndex:2]; lottie动画的选中没有切换？

参照demo，要加延迟才行。

[windforedawn]

您好，大牛，我想动态修改某个tabBarItem的lottie, 应该怎么做呢

[WangYQ]

@windforedawn 有同样的疑问，不知道这个库还在维护吗