iOS骨架屏框架--->TABAnimated 使用文檔

參考信息:

GitHub源碼+開發文檔: https://github.com/tigerAndBull/TABAnimated

一、基本思想

1.基本 骨架屏控制 對象

• 普通視圖控制：TABViewAnimated
• tableView控制：TABTableAnimated
• collectioinView控制：TABCollectionAnimated

2.調用流程

// 控制視圖初始化
TABViewAnimated *viewAnimated = [TABViewAnimated new];
view.tabAnimated = viewAnimated;

// 精細化控制 骨架屏動畫
// [TABAnimated sharedAnimated].openAnimationTag = YES; // 打開動畫標記（用于動態調試和測試）
viewAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
     // animationTag 動畫標記 (0、1、2...，根據視圖被添加addSubView的順序決定，可通過 openAnimationTag 打開查看
     manager.animation(animationTag).radius(5).width(100);
     manager.animation(1).radius(5);
     manager.animation(2).radius(5);
};

// 開啟動畫(加載數據時)
[view tab_startAnimation];  

// 停止動畫(數據加載完畢時)
[view tab_endAnimation];

二、框架集成

1.CocoPods集成:

pod ‘TABAnimated’

2.手動集成:

TABAnimated框架源碼文件加 拖入項目工程中

三、基本使用

0.框架初始化

在AppDelegate代理方法didFinishLaunchingWithOptions 方法中加入框架初始化代碼：

[[TABAnimated sharedAnimated] initWithOnlySkeleton];

[TABAnimated sharedAnimated].openLog = YES;

1.普通內容視圖

基本使用流程類似MJRefresh：

• 引入相關頭文件: #import ‘TABAnimated.h’;
• 構建UI結構和基本布局;
• 配置需生成骨架屏所在View的骨架屏拓展屬性tabAnimated(是一個TABViewAnimated對象) ，使用該View 調用tab_startAnimationWithCompletion:拓展方法,來開啟骨架屏動畫，在參數Block中 調用數據加載方法;
• 數據加載和處理完畢后，調用骨架屏所在View的tab_endAnimationEaseOut拓展方法停止動畫并展示數據。

????????以上為簡易使用的基本流程，中間的動畫效果由框架根據動畫配置信息默認生成。具體參考代碼如下:

    
- (void)viewDidLoad {
    [super viewDidLoad];

    // 構建基本UI
    [self setupUI];
    
    // 配置骨架動畫信息
    TABViewAnimated *viewAnimated = [TABViewAnimated new];
    self.view.tabAnimated = viewAnimated;
    
    // 精細化配置
    [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);
    };

    // 啟動動畫（默認延遲時間0.4s）
    [self.view tab_startAnimationWithCompletion:^{
        // 請求數據
        // ...
        // 獲得數據，數據處理
        // ...
        [self loadData];
    }];
    
}

- (void)loadData {
    
    // 發送網絡請求
    // ....
    
    /*** 請求成功后, 回到主線程***/
    // 停止骨架動畫
    [self.view tab_endAnimationEaseOut];
    
    // 展示數據
    [self showMsgToUI];
}

2.列表視圖用法(UITableView)

????????列表視圖(tableView)的骨架動畫拓展屬性tabAnimated，通過TABTableAnimated以一個Cell類模版和固定高度來生成(即TABTableAnimated的animatedWithCellClass:cellHeight方法)，后面同樣調用視圖 拓展tab_startAnimationWithCompletion: 來開啟動畫，并在completionBlock參數中請求網絡數據， 數據請求完成后調用 視圖的tab_endAnimationEaseOut 方法來結束動畫和展示數據;

注意事項:

tableView的 tableViewHeader、tableViewFooter如需參與骨架屏生成，需要單獨開啟:

tableView.tabAnimated.showTableHeaderView = YES;

tableView.tabAnimated.showTableFooterView = YES;

基本參考代碼如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 初始化數據容器
    self.dataArr = [NSMutableArray arrayWithObjects:@"1",@"2",@"3", nil];
    
    // 構建UI
    [self setupUI];
    
    // 配置骨架屏動畫信息
    self.tableView.tabAnimated = [TABTableAnimated animatedWithCellClass:[WZSkeletonTableCell class] cellHeight:160];

    // 精細化動畫控制
    // [TABAnimated sharedAnimated].openAnimationTag = YES; // 動畫元素標記
    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);
    };
    
    // 啟動動畫
    [self.tableView tab_startAnimationWithCompletion:^{
        // 請求數據
        // ...
        // 獲得數據
        // ...
        [self loadData];
    }];
}

- (void)loadData {
    
    // 加載 和 處理數據（*此處為數據加載模擬）
    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];
        
    // 停止動畫,并刷新數據(回到主線程)
    [self.tableView tab_endAnimationEaseOut];
    
    // 刷新視圖
    [self.tableView reloadData];
}

3.集合視圖(UICollectionView)

????????集合視圖(collectionView)的骨架動畫拓展屬性tabAnimated，通過TABCollectionAnimated以及一個UICollectionViewCell類(模版）和固定size來生成(即調用TABCollectionAnimated的animatedWithCellClass:cellSize:方法),后面同樣調用視圖 拓展方法(tab_startAnimationWithCompletion: )來開啟動畫，并在completionBlock參數中請求網絡數據， 數據請求完成后調用 視圖的拓展方法(tab_endAnimationEaseOut)方法來結束動畫和展示數據;

    
- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 初始化數據容器
    self.dataArr = [NSMutableArray arrayWithObjects:@"1",@"2",@"3", nil];
    
    // 構建UI
    [self setupUI];
    
    // 配置骨架屏動畫信息
    self.collectionView.tabAnimated = [TABCollectionAnimated animatedWithCellClass:[WZSkeletionCollectionCell class] cellSize:CGSizeMake((kScreenWidth-5)/2, (kScreenWidth-5)/2)];
    
    // 內部子控件 動畫精細化控制
    [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);
    };

    // 啟動動畫
    [self.collectionView tab_startAnimationWithCompletion:^{
        // 請求數據
        // ...
        // 獲得數據
        // ...
        [self loadData];
    }];
    
}

- (void)loadData {
    
    // 請求網絡數據(*此處為數據加載模擬)
    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];
        
    /*** 數據請求和處理完畢后，回到主線程***/
    // 停止動畫
    [self.collectionView tab_endAnimationEaseOut];
    
    // 展示刷新數據
    [self.collectionView reloadData];
}

四、高級使用

1.tableView多個Section，每個Section下的Cell樣式各不相同

2.tableView多個Section，每個Section和Cell樣式都不同