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

Closed
ChenYilong opened this issue Dec 28, 2018 · 11 comments

Comments

@ChenYilong
Copy link
Owner

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.
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

@ChenYilong ChenYilong added the Q-A label Dec 28, 2018
@ChenYilong
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 {
/**
在选中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 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
@LazyJiu
Copy link

LazyJiu commented Apr 19, 2019

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

@HolmesZhao
Copy link

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

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

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

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

@ChenYilong
Copy link
Owner Author

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
Copy link

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

@TzyTman
Copy link

TzyTman commented Nov 7, 2019

OC版本库在哪里?

@baishitong
Copy link

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

@ChenYilong
Copy link
Owner Author

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

参照demo,要加延迟才行。

@windforedawn
Copy link

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

@yuyedaidao
Copy link

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

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

No branches or pull requests

8 participants