Skip to content

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

New issue
New issue
Closed
Closed
[CN]如何一行代码实现Lottie动画TabBar [EN]How to add animation of Lottie with one line of code#341
Labels
Q-Awiki
@ChenYilong

Description

@ChenYilong
ChenYilong
opened on Dec 28, 2018 · edited by ChenYilong
Owner

[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.
https://github.com/ChenYilong
https://github.com/ChenYilong
[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

Activity

ChenYilong
added
Q-A
on Dec 28, 2018
ChenYilong

ChenYilong commented on Apr 18, 2019

@ChenYilong
ChenYilong
on Apr 18, 2019 · edited by ChenYilong
OwnerAuthor
[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];
                   }
               }
           }
       }
   }
   
}
ChenYilong
changed the title [-]how to work with lottie[/-] [+][CN]如何一行代码实现Lottie动画TabBar [EN]How to add animation of Lottie with one line of code[/+] on Apr 18, 2019
ChenYilong
added
wiki
on Apr 18, 2019
LazyJiu

LazyJiu commented on Apr 19, 2019

@LazyJiu
LazyJiu
on Apr 19, 2019

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

HolmesZhao

HolmesZhao commented on Apr 19, 2019

@HolmesZhao
HolmesZhao
on Apr 19, 2019

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

ChenYilong
pinned this issue on Apr 19, 2019
ChenYilong

ChenYilong commented on Apr 19, 2019

@ChenYilong
ChenYilong
on Apr 19, 2019
OwnerAuthor

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

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

ChenYilong

ChenYilong commented on Apr 20, 2019

@ChenYilong
ChenYilong
on Apr 20, 2019
OwnerAuthor

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

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

ChenYilong
mentioned this on Apr 22, 2019
ChenYilong
closed this as completedon May 21, 2019
ChenYilong
mentioned this on Jun 5, 2019
ChenYilong
mentioned this on Jul 11, 2019
korea1501541730

korea1501541730 commented on Sep 29, 2019

@korea1501541730
korea1501541730
on Sep 29, 2019

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

TzyTman

TzyTman commented on Nov 7, 2019

@TzyTman
TzyTman
on Nov 7, 2019

OC版本库在哪里？

baishitong

baishitong commented on Jul 20, 2020

@baishitong
baishitong
on Jul 20, 2020

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

ChenYilong

ChenYilong commented on Jul 20, 2020

@ChenYilong
ChenYilong
on Jul 20, 2020
OwnerAuthor

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

参照demo，要加延迟才行。

windforedawn

windforedawn commented on Jan 20, 2021

@windforedawn
windforedawn
on Jan 20, 2021

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

yuyedaidao

yuyedaidao commented on Mar 11, 2021

@yuyedaidao
yuyedaidao
on Mar 11, 2021

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Q-Awiki

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ChenYilong@TzyTman@yuyedaidao@korea1501541730@baishitong

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