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];
}

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