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

ChenYilong · 2018-12-28T14:13:28Z

[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

The text was updated successfully, but these errors were encountered:

ChenYilong · 2019-04-18T17:18:37Z

[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];
                   }
               }
           }
       }
   }
   
}

LazyJiu · 2019-04-19T00:39:27Z

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

HolmesZhao · 2019-04-19T01:02:10Z

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

ChenYilong · 2019-04-19T09:30:03Z

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

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

ChenYilong · 2019-04-20T21:42:45Z

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 · 2019-09-29T03:32:10Z

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

TzyTman · 2019-11-07T02:56:44Z

OC版本库在哪里？

baishitong · 2020-07-20T10:14:18Z

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

ChenYilong · 2020-07-20T10:21:45Z

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

参照demo，要加延迟才行。

windforedawn · 2021-01-20T02:56:46Z

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

yuyedaidao · 2021-03-11T02:25:40Z

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

ChenYilong added the Q-A label Dec 28, 2018

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

ChenYilong added the wiki label Apr 18, 2019

ChenYilong pinned this issue Apr 19, 2019

ChenYilong mentioned this issue Apr 22, 2019

lottie太难pod下来了，建议把依赖lottie的类分文件夹依赖 #363

Closed

ChenYilong closed this as completed May 21, 2019

ChenYilong mentioned this issue Jun 5, 2019

报错最新版 #379

Closed

ChenYilong mentioned this issue Jul 11, 2019

Lottie动画默认状态图片冲突 #397

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ChenYilong commented Dec 28, 2018 •

edited

ChenYilong commented Apr 18, 2019 •

edited

LazyJiu commented Apr 19, 2019

HolmesZhao commented Apr 19, 2019

ChenYilong commented Apr 19, 2019

ChenYilong commented Apr 20, 2019

korea1501541730 commented Sep 29, 2019

TzyTman commented Nov 7, 2019

baishitong commented Jul 20, 2020

ChenYilong commented Jul 20, 2020

windforedawn commented Jan 20, 2021

yuyedaidao commented Mar 11, 2021

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

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

Comments

ChenYilong commented Dec 28, 2018 • edited

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

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

ChenYilong commented Apr 18, 2019 • edited

LazyJiu commented Apr 19, 2019

HolmesZhao commented Apr 19, 2019

ChenYilong commented Apr 19, 2019

ChenYilong commented Apr 20, 2019

korea1501541730 commented Sep 29, 2019

TzyTman commented Nov 7, 2019

baishitong commented Jul 20, 2020

ChenYilong commented Jul 20, 2020

windforedawn commented Jan 20, 2021

yuyedaidao commented Mar 11, 2021

ChenYilong commented Dec 28, 2018 •

edited

ChenYilong commented Apr 18, 2019 •

edited