Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

ChenYilong opened this issue Dec 28, 2018 · 11 comments


Copy link

ChenYilong commented Dec 28, 2018

[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.
[EN]How to use it:
[EN]Assign a values to keys listed here:

key1 key2
key CYLTabBarLottieURL CYLTabBarLottieSize
type of value NSURL NSValue
meaning of value [CN]lottie 所在路径

path of resource

size of LottieView
attention [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.
[EN]Show case:

update 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 


       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 = @[

   CYLTabBarController *tabBarController = [CYLTabBarController tabBarControllerWithViewControllers:self.viewControllers

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

@ChenYilong ChenYilong added the Q-A label Dec 28, 2018
Copy link
Owner Author

ChenYilong commented Apr 18, 2019

[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 {

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) {
   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;
               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];

@ChenYilong ChenYilong changed the title how to work with lottie [CN]如何一行代码实现Lottie动画TabBar [EN]How to add animation of Lottie with one line of code Apr 18, 2019
Copy link

LazyJiu commented Apr 19, 2019


Copy link

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

@ChenYilong ChenYilong pinned this issue Apr 19, 2019
Copy link
Owner Author


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

Copy link
Owner Author


CC协议,(Creative Commons license)非常宽松
Files can be used for commercial usage within Applications

Copy link

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

Copy link

TzyTman commented Nov 7, 2019


Copy link

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

Copy link
Owner Author

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


Copy link

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

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

8 participants