发现

任务

客服工单

发文章

iOS tabbar动画-CYLTabBarController

源代码 2024-10-1 23:11:17 154 0 来自 中国

  • GitHub 源码: CYLTabBarController
  • Star: 6.1k
【中国特色 TabBar】一行代码实现 Lottie 动画 TabBar，支持中心带 + 号的 TabBar 样式，自带红点角标，支持动态革新。【iOS13 & Dark Mode & iPhone XS MAX supported】。
前言

起首：不光仅是一行代码！
官方声称的 "一行代码实现 Lottie 动画 TabBar" 着实有虚晃一枪的怀疑，让你听起来误以为用一行代码就可以实现淘宝「闲鱼」那种既带 ➕ 号按钮又带 Lottie 动画的 TabBar 了。着实折腾下来照旧要写个几百行代码的。正确的形貌应该是：集成 CYLTabBarController 之后，再导入所需的 JSON 文件（该文件用于形貌 TabBar 的 Lottie 动画），并添加一行代码，即可让 TabBar 实现 Lottie 动画。
因此，所谓的 "一行代码实现 Lottie 动画”，着实就是设置方法里面再加一个 key 值为 CYLTabBarLottieURL 的属性，它的值是一个 NSURL 链接，指向你项目中形貌 Lottie 动画的 JSON 文件。你照旧必要本身提前准备好 Lottie 的 JSON 文件的，以是说，所谓的一行代码就是，当涉及到 Lottie 动画时，你给体系传一个带 Lottie 动画的 URL 文件（既然“一行代码”是这个意思的话，我是不是可以说一行代码实现一个全套 Google 搜刮引擎功能呢？打开一个 google.com 的 HTML 5 页面不就实现了嘛）。
别的，一望见 CYLTabBarController 这个框架是国人写的，而且 README 文档是中文的，真的是喜极而泣?，让我误以为花个 5 分钟便可以从入门到醒目，终极折腾了好几天，下载了好几个 Demo 才算弄明白。
鉴于官方 README.md 文档的“暗昧不清”，与配套 Demo 写法上也存在很大的收支，照旧让一开始初入相识该框架的同砚造成了很大的困扰。
接下来，我会通过实现一个模仿「闲鱼」TabBar 动画的 Demo 来让各人重新相识它。
开始利用

准备：新建 Xcode 项目

在 Xcode 11 情况下新建一个 Single View App 项目，打开这个新的项目，可以看到体系除了会自动天生 AppDelegate 文件外，还会自动天生一个名为 SceneDelegate 的类文件。
1.png ⚠️ SceneDelegate 是 iOS 13 下的新特性，检察 WWDC 2019: Optimizing App Launch 可以知道这到底是啥，但是 CYLTabBarController 还未适配该特性（截止 1.28.3 版本），基于 SceneDelegate 集成该框架应用会瓦解！以是我们要先把 SceneDelegate 特性删除才行。
步调：

  • 起首打开 Info.plist 文件，找到下面这两个属性并删除。

  • 删除 SceneDelegate 类文件，着实可删可不删，但既然我们用不到就删了吧。
  • 修改 AppDelegate.h 文件，加上 UIWindow 属性。
#import <UIKit/UIKit.h>@interface AppDelegate : UIResponder <UIApplicationDelegate>@property (strong, nonatomic) UIWindow * window;@end

  • 修改 AppDelegate.m 文件，设置 UIWindow 设置主窗口，并删除多余的 <UISceneSession> 署理协议。
#import "AppDelegate.h"#import "ViewController.h"@interface AppDelegate ()@end@implementation AppDelegate- (BOOL)applicationUIApplication *)application didFinishLaunchingWithOptionsNSDictionary *)launchOptions {    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    // 设置根视图控制器    ViewController *controller = [[ViewController alloc] init];    // 窗口根视图控制器    self.window.rootViewController = controller;    self.window.backgroundColor = [UIColor whiteColor];    [self.window makeKeyAndVisible];    return YES;}// 下面多余的代码请删除@end运行项目，无报错则继承往下。
第一步：利用 CocoaPods 导入 CYLTabBarController

可以很本心的说，README.md 文档中在 第一步利用 CocoaPods 导入 CYLTabBarController 一章算是形貌地最详尽的了，它居然还教你怎样安装 CocoaPods，堪比 CocoaPods 情况搭建教程了。
但是，有一点必要提示的是，安装 CocoaPods 请勿利用 sudo gem install cocoapods 这个下令，如果运行该下令提示存在权限题目：
# 错误示例$ sudo gem install cocoapodsPassword:Fetching cocoapods-1.8.4.gemFetching cocoapods-core-1.8.4.gemSuccessfully installed cocoapods-core-1.8.4ERROR:  While executing gem ... (Gem::FilePermissionError)    You don't have write permissions for the /usr/bin directory.# Mac OS 体系升级之后，体系把 /usr/bin 目次的写入权限禁用了，因此我们必要指定安装到别的目次下。# 正确示例，必要安装 cocoapods 到指定目次下$ sudo gem install cocoapods -n /usr/local/binSuccessfully installed cocoapods-1.8.4Parsing documentation for cocoapods-1.8.4Installing ri documentation for cocoapods-1.8.4Done installing documentation for cocoapods after 2 seconds1 gem installed别的，Podfile 示例文件如下：
# Uncomment the next line to define a global platform for your projectplatform :ios, '9.0'target 'CYLTabBarControllerDemo' do  # Comment the next line if you don't want to use dynamic frameworks  # use_frameworks!  # Pods for CYLTabBarControllerDemo  pod 'CYLTabBarController', '~> 1.28.3'        # 默认不依赖Lottie  pod 'CYLTabBarController/Lottie', '~> 1.28.1' # 依赖Lottie库  pod 'ChameleonFramework'                      # 颜色框架  pod 'YYKit'                                   # 会用到几个辅助方法end第二步：新建 AppDelegate 分类文件，初始化并设置 CYLTabBarController

如果你检察 CYLTabBarController 框架的 README.md 文档，作者会让你把许多设置方法写在 AppDelegate 这个类中。
但现实应用场景中，有许多设置方法都要写在这个文件里面，比如日志框架的设置、推送关照框架、第三方付出回调设置...另有一大堆工具类设置。
以是我风俗上会把差异的设置文件单独写在各自的分类（Category）中。
具体缘故原由可以去看看《Effective Objective-C 2.0 编写高质量 iOS 与 OS X 代码的 52 个有效方法 》一书中的第 24 条发起。
因此，我们必要新建一个 AppDelegate 分类文件，然后把全部与初始化 CYLTabBarController 框架相干的代码都写在 AppDelegate+CYLTabBar 文件里面，保持代码整洁，方便修改。

  • 新建一个 AppDelegate 分类文件。
    点击 Xcode 导航栏 — File — New — File...— 选择 iOS Source 列表下的「Objective-C File」，新建文件范例和文件名如下：
    3.png
  • 在 Assets.xcassets 资产库中导入你所必要的图片文件。
  • 在分类中新建一个方法，用于设置主窗口：
#import "AppDelegate.h"NS_ASSUME_NONNULL_BEGIN/// 这是 AppDelegate 的分类，用于设置 CYLTabBarController@interface AppDelegate (CYLTabBar)/// 设置主窗口- (void)hql_configureForTabBarController;@endNS_ASSUME_NONNULL_END然后我们在 .m 文件中实现它，设置 CYLTabBarController 的两个数组：控制器数组和设置 tabBar 外观样式的属性数组：
@implementation AppDelegate (CYLTabBar)#pragma mark - Public- (void)hql_configureForTabBarController {    // 设置主窗口，并设置根视图控制器    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    self.window.backgroundColor = [UIColor whiteColor];    [self.window makeKeyAndVisible];    // 初始化 CYLTabBarController 对象    CYLTabBarController *tabBarController =        [CYLTabBarController tabBarControllerWithViewControllers:[self viewControllers]                                           tabBarItemsAttributes:[self tabBarItemsAttributes]];    // 设置服从委托协议    tabBarController.delegate = self;    // 将 CYLTabBarController 设置为 window 的 RootViewController    self.window.rootViewController = tabBarController;}#pragma mark - Private/// 控制器数组- (NSArray *)viewControllers {    // 首页    HomeViewController *homeVC = [[HomeViewController alloc] init];    homeVC.navigationItem.title = @"首页";    CYLBaseNavigationController *homeNC = [[CYLBaseNavigationController alloc] initWithRootViewController:homeVC];    [homeNC cyl_setHideNavigationBarSeparator:YES];    // 同城    MyCityViewController *myCityVC = [[MyCityViewController alloc] init];    myCityVC.navigationItem.title = @"同城";    CYLBaseNavigationController *myCityNC = [[CYLBaseNavigationController alloc] initWithRootViewController:myCityVC];    [myCityNC cyl_setHideNavigationBarSeparator:YES];    // 消息    MessageViewController *messageVC = [[MessageViewController alloc] init];    messageVC.navigationItem.title = @"消息";    CYLBaseNavigationController *messageNC = [[CYLBaseNavigationController alloc] initWithRootViewController:messageVC];    [messageNC cyl_setHideNavigationBarSeparator:YES];    // 我的    AccountViewController *accountVC = [[AccountViewController alloc] init];    accountVC.navigationItem.title = @"我的";    CYLBaseNavigationController *accountNC = [[CYLBaseNavigationController alloc] initWithRootViewController:accountVC];    [accountNC cyl_setHideNavigationBarSeparator:YES];    NSArray *viewControllersArray = @[homeNC, myCityNC, messageNC, accountNC];    return viewControllersArray;}/// tabBar 属性数组- (NSArray *)tabBarItemsAttributes {    NSDictionary *homeTabBarItemsAttributes = @{        CYLTabBarItemTitle: @"首页",        CYLTabBarItemImage: @"home_normal",        CYLTabBarItemSelectedImage: @"home_highlight",    };    NSDictionary *myCityTabBarItemsAttributes = @{        CYLTabBarItemTitle: @"同城",        CYLTabBarItemImage: @"mycity_normal",        CYLTabBarItemSelectedImage: @"mycity_highlight",    };    NSDictionary *messageTabBarItemsAttributes = @{        CYLTabBarItemTitle: @"消息",        CYLTabBarItemImage: @"message_normal",        CYLTabBarItemSelectedImage: @"message_highlight",    };    NSDictionary *accountTabBarItemsAttributes = @{        CYLTabBarItemTitle: @"我的",        CYLTabBarItemImage: @"account_normal",        CYLTabBarItemSelectedImage: @"account_highlight",    };    NSArray *tabBarItemsAttributes = @[        homeTabBarItemsAttributes,        myCityTabBarItemsAttributes,        messageTabBarItemsAttributes,        accountTabBarItemsAttributes    ];    return tabBarItemsAttributes;}@end

  • 末了，我们回到 AppDelegate.m 文件，导入上一步新建的分类头文件 :
#import "AppDelegate+CYLTabBar.h"

  • 然后一行代码调用设置主窗口的方法：
#import "AppDelegate.h"#import "AppDelegate+CYLTabBar.h" // 导入的分类文件@implementation AppDelegate- (BOOL)applicationUIApplication *)application didFinishLaunchingWithOptionsNSDictionary *)launchOptions {    // 调用分类文件中的设置主窗口方法：    [self hql_configureForTabBarController];    return YES;}@end

  • 至此，常见的带 4 个 TabBarItem 的应用框架就搭建好啦：
小结：将 CYLTabBarController 实例化为窗口的根视图控制器即可。
第三步：添加不规则加号按钮

创建一个继承自 CYLPlusButton 的子类对象 CYLPlusButtonSubclass。
CYLPlusButtonSubclass.h 声明服从 <CYLPlusButtonSubclassing> 协议

#import "CYLPlusButton.h"NS_ASSUME_NONNULL_BEGIN@interface CYLPlusButtonSubclass : CYLPlusButton <CYLPlusButtonSubclassing>@endNS_ASSUME_NONNULL_ENDCYLPlusButtonSubclass.m 中实现创建按钮的方法和服从的协议方法

#import "CYLPlusButtonSubclass.h"@implementation CYLPlusButtonSubclass#pragma mark - Lifecycle- (instancetype)initWithFrameCGRect)frame {    if (self = [super initWithFrame:frame]) {        self.titleLabel.textAlignment = NSTextAlignmentCenter;        self.adjustsImageWhenHighlighted = NO;    }    return self;}//上下布局的 button- (void)layoutSubviews {    [super layoutSubviews];    // 控件巨细,间距巨细    // 注意：肯定要根据项目中的图片去调解下面的0.7和0.9，Demo之以是这么设置，由于demo中的 plusButton 的 icon 不是正方形。    CGFloat const imageViewEdgeWidth   = self.bounds.size.width * 0.7;    CGFloat const imageViewEdgeHeight  = imageViewEdgeWidth;    CGFloat const centerOfView    = self.bounds.size.width * 0.5;    CGFloat const labelLineHeight = self.titleLabel.font.lineHeight;    CGFloat const verticalMargin  = (self.bounds.size.height - labelLineHeight - imageViewEdgeHeight) * 0.5;    // imageView 和 titleLabel 中心的 Y 值    CGFloat const centerOfImageView  = verticalMargin + imageViewEdgeHeight * 0.5;    CGFloat const centerOfTitleLabel = imageViewEdgeHeight  + verticalMargin * 2 + labelLineHeight * 0.5 - 1;    //imageView position 位置    self.imageView.bounds = CGRectMake(0, 0, imageViewEdgeWidth, imageViewEdgeHeight);    self.imageView.center = CGPointMake(centerOfView, centerOfImageView);    //title position 位置    self.titleLabel.bounds = CGRectMake(0, 0, self.bounds.size.width, labelLineHeight);    self.titleLabel.center = CGPointMake(centerOfView, centerOfTitleLabel);}#pragma mark - IBActions- (void)clickPublish {    // 如果按钮的作用是触发点击变乱，则调用此方法}#pragma mark - CYLPlusButtonSubclassing+ (id)plusButton {    CYLPlusButtonSubclass *button = [CYLPlusButtonSubclass buttonWithType:UIButtonTypeCustom];    // 图片尺寸：56*56、67*66、49*48（凸出 15）    UIImage *normalButtonImage = [UIImage imageNamed"post_normal"];    UIImage *hlightButtonImage = [UIImage imageNamed"post_highlight"];    [button setImage:normalButtonImage forState:UIControlStateNormal];    [button setImage:hlightButtonImage forState:UIControlStateHighlighted];    [button setImage:hlightButtonImage forState:UIControlStateSelected];    // 设置配景图片//    UIImage *normalButtonBackImage = [UIImage imageNamed"tabBar_post_back"];//    [button setBackgroundImage:normalButtonBackImage forState:UIControlStateNormal];//    [button setBackgroundImage:normalButtonBackImage forState:UIControlStateSelected];    // 按钮图片间隔上边距增长 5，即向下偏移，按钮图片间隔下边距淘汰 5，即向下偏移。    //button.imageEdgeInsets = UIEdgeInsetsMake(5, 0, -5, 0);    [button setTitle"发布" forState:UIControlStateNormal];    [button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];    button.titleLabel.font = [UIFont systemFontOfSize:10 weight:UIFontWeightBold];    [button sizeToFit]; // or set frame in this way `button.frame = CGRectMake(0.0, 0.0, 250, 100);`    //自界说宽度    button.frame = CGRectMake(0.0, 0.0, 59, 59);    // button.backgroundColor = [UIColor redColor];    // if you use `+plusChildViewController` , do not addTarget to plusButton.    // [button addTarget:button actionselector(clickPublish) forControlEvents:UIControlEventTouchUpInside];    return button;}// 用来自界说加号按钮的位置，如果不实现默认居中。+ (NSUInteger)indexOfPlusButtonInTabBar {    return 2;}// 实现该方法后，能让 PlusButton 的点击结果与跟点击其他 TabBar 按钮结果一样，跳转到该方法指定的 UIViewController+ (UIViewController *)plusChildViewController {    UIViewController *v = [[UIViewController alloc] init];    return v;}// 该方法是为了调解 PlusButton 中心点Y轴方向的位置，发起在按钮超出了 tabbar 的边界时实现该方法。// 返回值是自界说按钮中心点 Y 轴方向的坐标除以 tabbar 的高度，小于 0.5 表现 PlusButton 偏上，大于 0.5 则表现偏下。// PlusButtonCenterY = multiplierOfTabBarHeight * tabBarHeight + constantOfPlusButtonCenterYOffset;+ (CGFloat)multiplierOfTabBarHeightCGFloat)tabBarHeight {    return  0.3;}// constantOfPlusButtonCenterYOffset 大于 0 会向下偏移，小于 0 会向上偏移。+ (CGFloat)constantOfPlusButtonCenterYOffsetForTabBarHeightCGFloat)tabBarHeight {    return (CYL_IS_IPHONE_X ? - 6 : 4);}@end在 AppDelegate+CYLTabBar.m 中注册该按钮

在初始化 CYLTabBarController 对象步调之前注册按钮：
- (void)hql_configureForTabBarController {    // 设置主窗口，并设置根视图控制器    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    self.window.backgroundColor = [UIColor whiteColor];    [self.window makeKeyAndVisible];    // ??? 注册加号按钮    [CYLPlusButtonSubclass registerPlusButton];    // 初始化 CYLTabBarController 对象    CYLTabBarController *tabBarController =        [CYLTabBarController tabBarControllerWithViewControllers:[self viewControllers]                                           tabBarItemsAttributes:[self tabBarItemsAttributes]];    // 设置服从委托协议    tabBarController.delegate = self;    self.window.rootViewController = tabBarController;}自此，加号按钮也添加完成啦。
5.jpg 第四步：设置自界说 TabBar 样式

自界说 TabBar 字体、配景、阴影。
在 AppDelegate+CYLTabBar.m 文件中新增一个方法，用于设置 TabBar 样式：
/// 自界说 TabBar 字体、配景、阴影- (void)customizeTabBarInterface {    // 设置笔墨属性    if (@available(iOS 10.0, *)) {        [self cyl_tabBarController].tabBar.unselectedItemTintColor = [UIColor cyl_systemGrayColor];        [self cyl_tabBarController].tabBar.tintColor = [UIColor cyl_labelColor];    } else {        UITabBarItem *tabBar = [UITabBarItem appearance];        // 平常状态下的笔墨属性        [tabBar setTitleTextAttributes{NSForegroundColorAttributeName: [UIColor cyl_systemGrayColor]}                              forState:UIControlStateNormal];        // 选中状态下的笔墨属性        [tabBar setTitleTextAttributes{NSForegroundColorAttributeName: [UIColor cyl_labelColor]}                              forState:UIControlStateSelected];    }    // 设置 TabBar 配景颜色：白色    // ?[UIImage imageWithColor] 表现根据指定颜色天生图片，该方法来自 <YYKit> 框架    [[UITabBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor]]];    // 去除 TabBar 自带的顶部阴影    [[self cyl_tabBarController] hideTabBarShadowImageView];    // 设置 TabBar 阴影，无效    // [[UITabBar appearance] setShadowImage:[UIImage imageNamed"tabBar_background_shadow"]];    // 设置 TabBar 阴影    CYLTabBarController *tabBarController = [self cyl_tabBarController];    tabBarController.tabBar.layer.shadowColor = [UIColor blackColor].CGColor;    tabBarController.tabBar.layer.shadowRadius = 15.0;    tabBarController.tabBar.layer.shadowOpacity = 0.2;    tabBarController.tabBar.layer.shadowOffset = CGSizeMake(0, 3);    tabBarController.tabBar.layer.masksToBounds = NO;    tabBarController.tabBar.clipsToBounds = NO;}然后在该文件的设置方法中调用：
- (void)hql_configureForTabBarController {    // 设置主窗口，并设置根视图控制器    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    self.window.backgroundColor = [UIColor whiteColor];    [self.window makeKeyAndVisible];    // 注册加号按钮    [CYLPlusButtonSubclass registerPlusButton];    // 初始化 CYLTabBarController 对象    CYLTabBarController *tabBarController =        [CYLTabBarController tabBarControllerWithViewControllers:[self viewControllers]                                           tabBarItemsAttributes:[self tabBarItemsAttributes]];    // 设置服从委托协议    tabBarController.delegate = self;    self.window.rootViewController = tabBarController;    // ??? 自界说 TabBar 字体、配景、阴影     [self customizeTabBarInterface];}别的，不规则加号按钮的配景图片必要在 CYLPlusButtonSubclass.m 文件的 + (id)plusButton 中设置：
// 设置配景图片UIImage *normalButtonBackImage = [UIImage imageNamed"tabBar_post_back"];[button setBackgroundImage:normalButtonBackImage forState:UIControlStateNormal];[button setBackgroundImage:normalButtonBackImage forState:UIControlStateSelected];下面是自界说后的 TabBar 样式示例：
第五步：添加点击旋转动画

当点击 TabBarItem 时，为它设置旋转动画，必要让 AppDelegate 服从 <CYLTabBarControllerDelegate, UITabBarControllerDelegate> 委托协议，以监听点击触发变乱：
// ??? 声明服从委托协议@interface AppDelegate () <CYLTabBarControllerDelegate, UITabBarControllerDelegate>@end@implementation AppDelegate (CYLTabBar)- (void)hql_configureForTabBarController {        // 省略...    // 初始化 CYLTabBarController 对象    CYLTabBarController *tabBarController =        [CYLTabBarController tabBarControllerWithViewControllers:[self viewControllers]                                           tabBarItemsAttributes:[self tabBarItemsAttributes]];    // ??? 设置让 AppDelegate 服从委托协议    tabBarController.delegate = self;    self.window.rootViewController = tabBarController;}接下来是让 AppDelegate 实现委托协议方法，点击 TabBarItem 时触发旋转动画，点不规则加号按钮时触发放大动画：
- (BOOL)tabBarControllerUITabBarController *)tabBarController shouldSelectViewControllerUIViewController *)viewController {    // 确保 PlusButton 的选中状态    [[self cyl_tabBarController] updateSelectionStatusIfNeededForTabBarController:tabBarController shouldSelectViewController:viewController];    return YES;}- (void)tabBarControllerUITabBarController *)tabBarController didSelectControl:(UIControl *)control {    UIView *animationView;    NSLog(@"?\n 类名与方法名：%@，\n 第 %@ 行，\n description : %@，\n tabBarChildViewControllerIndex: %@， tabBarItemVisibleIndex : %@", @(__PRETTY_FUNCTION__), @(__LINE__), control, @(control.cyl_tabBarChildViewControllerIndex), @(control.cyl_tabBarItemVisibleIndex));    // 纵然 PlusButton 也添加了点击变乱，点击 PlusButton 后也会触发该署理方法。    if ([control cyl_isPlusButton]) {        UIButton *button = CYLExternPlusButton;        animationView = button.imageView;        // 为加号按钮添加「缩放动画」        [self addScaleAnimationOnView:animationView repeatCount:1];    } else if ([control isKindOfClass:NSClassFromString(@"UITabBarButton")]) {        for (UIView *subView in control.subviews) {            if ([subView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {                animationView = subView;                // 为其他按钮添加「旋转动画」                [self addRotateAnimationOnView:animationView];            }        }    }}/// 缩放动画- (void)addScaleAnimationOnView:(UIView *)animationView repeatCount:(float)repeatCount {    //必要实现的帧动画，这里根据需求自界说    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];    animation.keyPath = @"transform.scale";     animation.values = @[@1.0,@1.3,@0.9,@1.15,@0.95,@1.02,@1.0];    animation.duration = 0.5;    animation.repeatCount = repeatCount;    animation.calculationMode = kCAAnimationCubic;    [animationView.layer addAnimation:animation forKey:nil];}/// 旋转动画- (void)addRotateAnimationOnView:(UIView *)animationView {   [UIView animateWithDuration:0.32 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{       animationView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);   } completion:nil];   dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{       [UIView animateWithDuration:0.70 delay:0 usingSpringWithDamping:1 initialSpringVelocity:0.2 options:UIViewAnimationOptionCurveEaseOut animations:^{           animationView.layer.transform = CATransform3DMakeRotation(2 * M_PI, 0, 1, 0);       } completion:nil];   });}实现结果：
第六步：添加 Lottie 动画

参考：https://github.com/ChenYilong/CYLTabBarController/issues/341
起首，为方便演示，我们从官方 Demo 中获取 Lottie 动画的 JSON 文件和相干资源文件。
然后，修改设置 tabBar 属性数组的方法 - (NSArray *)tabBarItemsAttributes，把 Lottie 文件的 URL 路径加上：
/* * tabBar 属性数组，带 Loggie 动画 * 参考：<https://github.com/ChenYilong/CYLTabBarController/issues/341> * * 与上面的设置相比，必要再多设置两个属性： *   CYLTabBarLottieURL: 传入 lottie 动画 JSON 文件地点路径 *   CYLTabBarLottieSize: LottieView 巨细，选填 * */- (NSArray *)tabBarItemsAttributes {    NSDictionary *homeTabBarItemsAttributes = @{        CYLTabBarItemTitle: @"首页",        CYLTabBarLottieURL : [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource"tab_home_animate" ofType:@"json"]],        CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(33, 33)],    };    NSDictionary *myCityTabBarItemsAttributes = @{        CYLTabBarItemTitle: @"同城",        CYLTabBarLottieURL : [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"tab_search_animate" ofType:@"json"]],        CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(33, 33)],    };    NSDictionary *messageTabBarItemsAttributes = @{        CYLTabBarItemTitle: @"消息",        CYLTabBarLottieURL : [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"tab_message_animate" ofType:@"json"]],        CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(33, 33)],    };    NSDictionary *accountTabBarItemsAttributes = @{        CYLTabBarItemTitle: @"我的",        CYLTabBarLottieURL : [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"tab_me_animate" ofType:@"json"]],        CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(33, 33)],    };    NSArray *tabBarItemsAttributes = @[        homeTabBarItemsAttributes,        myCityTabBarItemsAttributes,        messageTabBarItemsAttributes,        accountTabBarItemsAttributes    ];    return tabBarItemsAttributes;}自此，我们通过 CYLTabBarController 框架实现了一个仿「闲鱼」TabBar 动画的应用。
Demo：HQLTableViewDemo
原文链接：https://www.jianshu.com/p/50735aa8a9f2

举报

您需要登录后才可以回帖 登录 | 立即注册
源代码
优秀作者 助人为乐 人气作者
文章
380
问答
380
粉丝
0

所属分类: 问答交流

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-21 23:19, Processed in 0.233113 second(s), 35 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表