iOS骨架屏框架--->TABAnimated 使用文檔
參考信息:
GitHub源碼+開(kāi)發(fā)文檔: https://github.com/tigerAndBull/TABAnimated
一惭适、基本思想
1.基本 骨架屏控制 對(duì)象
- 普通視圖控制：TABViewAnimated
- tableView控制：TABTableAnimated
- collectioinView控制：TABCollectionAnimated
2.調(diào)用流程
// 控制視圖初始化
TABViewAnimated *viewAnimated = [TABViewAnimated new];
view.tabAnimated = viewAnimated;
// 精細(xì)化控制 骨架屏動(dòng)畫(huà)
// [TABAnimated sharedAnimated].openAnimationTag = YES; // 打開(kāi)動(dòng)畫(huà)標(biāo)記（用于動(dòng)態(tài)調(diào)試和測(cè)試）
viewAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
// animationTag 動(dòng)畫(huà)標(biāo)記 (0就轧、1明刷、2...猴凹，根據(jù)視圖被添加addSubView的順序決定崔列，可通過(guò) openAnimationTag 打開(kāi)查看
manager.animation(animationTag).radius(5).width(100);
manager.animation(1).radius(5);
manager.animation(2).radius(5);
};
// 開(kāi)啟動(dòng)畫(huà)(加載數(shù)據(jù)時(shí))
[view tab_startAnimation];
// 停止動(dòng)畫(huà)(數(shù)據(jù)加載完畢時(shí))
[view tab_endAnimation];
二秆吵、框架集成
1.CocoPods集成:
pod ‘TABAnimated’
2.手動(dòng)集成:
TABAnimated框架源碼文件加 拖入項(xiàng)目工程中
三缸榄、基本使用
0.框架初始化
在AppDelegate代理方法didFinishLaunchingWithOptions 方法中加入框架初始化代碼：
[[TABAnimated sharedAnimated] initWithOnlySkeleton];
[TABAnimated sharedAnimated].openLog = YES;
1.普通內(nèi)容視圖
基本使用流程類(lèi)似MJRefresh：
- 引入相關(guān)頭文件: #import ‘TABAnimated.h’;
- 構(gòu)建UI結(jié)構(gòu)和基本布局;
- 配置需生成骨架屏所在View的骨架屏拓展屬性tabAnimated(是一個(gè)TABViewAnimated對(duì)象) 捞附，使用該View 調(diào)用tab_startAnimationWithCompletion:拓展方法,來(lái)開(kāi)啟骨架屏動(dòng)畫(huà)纠修，在參數(shù)Block中 調(diào)用數(shù)據(jù)加載方法;
- 數(shù)據(jù)加載和處理完畢后涩堤，調(diào)用骨架屏所在View的tab_endAnimationEaseOut拓展方法停止動(dòng)畫(huà)并展示數(shù)據(jù)。
????????以上為簡(jiǎn)易使用的基本流程分瘾，中間的動(dòng)畫(huà)效果由框架根據(jù)動(dòng)畫(huà)配置信息默認(rèn)生成胎围。具體參考代碼如下:
- (void)viewDidLoad {
[super viewDidLoad];
// 構(gòu)建基本UI
[self setupUI];
// 配置骨架動(dòng)畫(huà)信息
TABViewAnimated *viewAnimated = [TABViewAnimated new];
self.view.tabAnimated = viewAnimated;
// 精細(xì)化配置
[TABAnimated sharedAnimated].openAnimationTag = YES;
viewAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
// manager.animation(0).radius(kScreenWidth/5.0/2.0);
manager.animation(1).radius(5);
manager.animation(2).radius(5);
};
// 啟動(dòng)動(dòng)畫(huà)（默認(rèn)延遲時(shí)間0.4s）
[self.view tab_startAnimationWithCompletion:^{
// 請(qǐng)求數(shù)據(jù)
// ...
// 獲得數(shù)據(jù)吁系，數(shù)據(jù)處理
// ...
[self loadData];
}];
}
- (void)loadData {
// 發(fā)送網(wǎng)絡(luò)請(qǐng)求
// ....
/*** 請(qǐng)求成功后, 回到主線(xiàn)程***/
// 停止骨架動(dòng)畫(huà)
[self.view tab_endAnimationEaseOut];
// 展示數(shù)據(jù)
[self showMsgToUI];
}
2.列表視圖用法(UITableView)
????????列表視圖(tableView)的骨架動(dòng)畫(huà)拓展屬性tabAnimated，通過(guò)TABTableAnimated以一個(gè)Cell類(lèi)模版和固定高度來(lái)生成(即TABTableAnimated的animatedWithCellClass:cellHeight方法)白魂，后面同樣調(diào)用視圖 拓展tab_startAnimationWithCompletion: 來(lái)開(kāi)啟動(dòng)畫(huà)汽纤，并在completionBlock參數(shù)中請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)， 數(shù)據(jù)請(qǐng)求完成后調(diào)用 視圖的tab_endAnimationEaseOut 方法來(lái)結(jié)束動(dòng)畫(huà)和展示數(shù)據(jù);
注意事項(xiàng):
tableView的 tableViewHeader福荸、tableViewFooter如需參與骨架屏生成蕴坪，需要單獨(dú)開(kāi)啟:
tableView.tabAnimated.showTableHeaderView = YES;
tableView.tabAnimated.showTableFooterView = YES;
基本參考代碼如下：
- (void)viewDidLoad {
[super viewDidLoad];
// 初始化數(shù)據(jù)容器
self.dataArr = [NSMutableArray arrayWithObjects:@"1",@"2",@"3", nil];
// 構(gòu)建UI
[self setupUI];
// 配置骨架屏動(dòng)畫(huà)信息
self.tableView.tabAnimated = [TABTableAnimated animatedWithCellClass:[WZSkeletonTableCell class] cellHeight:160];
// 精細(xì)化動(dòng)畫(huà)控制
// [TABAnimated sharedAnimated].openAnimationTag = YES; // 動(dòng)畫(huà)元素標(biāo)記
self.tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
manager.animation(0).radius(30);
manager.animation(1).radius(5).height(15).width(100);
manager.animation(2).radius(5).height(15).width(100);
manager.animation(3).radius(5);
manager.animation(4).radius(5);
};
// 啟動(dòng)動(dòng)畫(huà)
[self.tableView tab_startAnimationWithCompletion:^{
// 請(qǐng)求數(shù)據(jù)
// ...
// 獲得數(shù)據(jù)
// ...
[self loadData];
}];
}
- (void)loadData {
// 加載 和 處理數(shù)據(jù)（*此處為數(shù)據(jù)加載模擬）
NSMutableArray *dataList = [NSMutableArray array];
NSInteger startIndex = [[self.dataArr lastObject] intValue];
for (NSInteger i = startIndex; i < startIndex+10; i ++) {
[dataList addObject:[@(i) stringValue]];
}
[self.dataArr addObjectsFromArray:dataList];
// 停止動(dòng)畫(huà),并刷新數(shù)據(jù)(回到主線(xiàn)程)
[self.tableView tab_endAnimationEaseOut];
// 刷新視圖
[self.tableView reloadData];
}
3.集合視圖(UICollectionView)
????????集合視圖(collectionView)的骨架動(dòng)畫(huà)拓展屬性tabAnimated，通過(guò)TABCollectionAnimated以及一個(gè)UICollectionViewCell類(lèi)(模版）和固定size來(lái)生成(即調(diào)用TABCollectionAnimated的animatedWithCellClass:cellSize:方法),后面同樣調(diào)用視圖 拓展方法(tab_startAnimationWithCompletion: )來(lái)開(kāi)啟動(dòng)畫(huà)敬锐，并在completionBlock參數(shù)中請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)背传， 數(shù)據(jù)請(qǐng)求完成后調(diào)用 視圖的拓展方法(tab_endAnimationEaseOut)方法來(lái)結(jié)束動(dòng)畫(huà)和展示數(shù)據(jù);
- (void)viewDidLoad {
[super viewDidLoad];
// 初始化數(shù)據(jù)容器
self.dataArr = [NSMutableArray arrayWithObjects:@"1",@"2",@"3", nil];
// 構(gòu)建UI
[self setupUI];
// 配置骨架屏動(dòng)畫(huà)信息
self.collectionView.tabAnimated = [TABCollectionAnimated animatedWithCellClass:[WZSkeletionCollectionCell class] cellSize:CGSizeMake((kScreenWidth-5)/2, (kScreenWidth-5)/2)];
// 內(nèi)部子控件 動(dòng)畫(huà)精細(xì)化控制
[TABAnimated sharedAnimated].openAnimationTag = YES;
self.collectionView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
manager.animation(1).width(30).radius(5);
manager.animation(2).radius(5);
manager.animation(3).radius(5);
manager.animation(4).radius(5);
};
// 啟動(dòng)動(dòng)畫(huà)
[self.collectionView tab_startAnimationWithCompletion:^{
// 請(qǐng)求數(shù)據(jù)
// ...
// 獲得數(shù)據(jù)
// ...
[self loadData];
}];
}
- (void)loadData {
// 請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)(*此處為數(shù)據(jù)加載模擬)
NSMutableArray *dataList = [NSMutableArray array];
NSInteger startIndex = [[self.dataArr lastObject] intValue];
for (NSInteger i = startIndex; i < startIndex+10; i ++) {
[dataList addObject:[@(i) stringValue]];
}
[self.dataArr addObjectsFromArray:dataList];
/*** 數(shù)據(jù)請(qǐng)求和處理完畢后，回到主線(xiàn)程***/
// 停止動(dòng)畫(huà)
[self.collectionView tab_endAnimationEaseOut];
// 展示刷新數(shù)據(jù)
[self.collectionView reloadData];
}
四台夺、高級(jí)使用
1.tableView多個(gè)Section径玖，每個(gè)Section下的Cell樣式各不相同
2.tableView多個(gè)Section，每個(gè)Section和Cell樣式都不同
