iOS分享的demoToolsiOS Developer

iOS-基于lottie框架自定制实现YCTabBar

2017-10-27  本文已影响383人  简鱼7819

一、Lottie介绍

lottie是一个可以解析使用【bodymovin】插件从Adobe After Effects中导出的格式为 json 的文件,并在 iOS、Android、macOS、React Native 中进行解析使用的开源库。

在项目运用该库的目的只有一个那就是,让我们移动端展示出的UI更加绚丽。虽然一些动态的动画效果我们移动端开发自身也能画出来,但是耗费的时间和精力是十分巨大的。而借用lottie去解析由UI设计师bodymovin导出的json文件,就可以轻松的完成。

当然也有一些不足:要求系统版本在iOS8 及以上,目前只能支持播放动画,复杂的交互动画(特别需求有model数据交互)还不能支持!

二、YCTabBar

借力@东东隆东抢提醒,gif效果图做出来了

下载地址https://github.com/jianyu7819/YCLottieTabBar

主要代码是自定制YCtabBar,基于UIView

在YCTabBar.h中设置代理

@class YCTabBar;

@protocol YCTabBarDetagate<NSObject>

@optional-(void)tabBar:(YCTabBar *)tabBar didselectedButtonFrom:(int )from to: (int )to;

@end

@interface YCTabBar : UIView

@property(nonatomic,weak)iddelegate;

-(void)addTabBarButtonWithItem:(UITabBarItem *)item;

@end

这边我设置的代理主要监听跳转那页面下,可根据需求自定制

api:-(void)addTabBarButtonWithItem:(UITabBarItem *)item;主要传导过来tabbarcontroller的item数据

在YCTabBar.m中

主要在-(void)addTabBarButtonWithItem:(UITabBarItem *)item;API的实现和layoutSubviews中相应button和LOTAnimationView的frame布局。

-(void)addTabBarButtonWithItem:(UITabBarItem *)item{

//1、创建按钮 创建LOTAnimationView

NSString *jsonStr;

NSInteger TagNum;

if ([item.title isEqualToString:@"首页"]){

TagNum = 100;

jsonStr = @"data01.json";

}else if ([item.title isEqualToString:@"动态"]){

TagNum = 101;

jsonStr = @"data02.json";

}else if ([item.title isEqualToString:@"购物车"]){

TagNum = 102;

jsonStr = @"data03.json";

}else{

TagNum = 103;

jsonStr = @"data04.json";

}

LOTAnimationView *aniView = [LOTAnimationView animationNamed:jsonStr];

aniView.tag = TagNum;

if (aniView.tag == 100) {

_selectedview = aniView;

}

[self addSubview:aniView];

YCTabBarButton *button=[[YCTabBarButton alloc]init];

[self addSubview:button];

//添加按钮到数组中

[self.viewsArr addObject:aniView];

[self.tabBarButtons addObject:button];

//2、设置数据

button.item=item;

//3、监听按钮点击

[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];

//4、默认选中第零个

if(self.tabBarButtons.count==1){[_selectedview play];[self buttonClick:button];}

}

由于篇幅,想了解的更多,直接github下载,demo比较简单,逻辑也是比较清晰的。

https://github.com/jianyu7819/YCLottieTabBar欢迎大家!!

个人工作学习积累,分享~~

上一篇下一篇

猜你喜欢

热点阅读