原生骨架屏 - 2.0.0重磅推出-CSDN博客

关于 TABAnimated

TABAnimated起初是模仿简书的骨架屏效果。但是在2.0版本以上，为了优化底层原理，降低耦合度，删除了该特效，而且这种动态性，似乎不怎么受开发者欢迎。

实现原理

TABAnimated 需要一个控制视图，进行开关动画。该控制视图下的所有subViews都将加入动画队列。

当然，你可以指定view移出动画队列。 TABAnimated通过subViews的位置创建TABLayer。 (TABLayer 是 CALayer的子类)

几乎所有的页面都可以通过 TABAnimated解决。

当使用约束进行布局时，当约束不足且没有数据时，致使subViews的位置信息不能体现出来，TABAnimated会进行数据预填充。

两种模式

为什么有两种模式?

在大多数情况下，如果TABAnimated按原视图创建动画，则动画并不漂亮。但是你只需要做一点调整就可以让Tabanimated看起来不错。所以，如果您不关心项目中的耦合，您可以使用普通模式。

如果您在意耦合度和阅读成本，可以使用模版模式。于此同时，您需要另创建一个新的模板cell文件。虽然这种会增加工作负担，但是作者推崇这种模式。

优点

集成迅速
模版零耦合
高性能
适应性强
完全自定制

安装

使用 CocoaPods

pod 'TABAnimated'
复制代码

手动导入

将TABAnimated文件夹拖入工程

效果图

卡片投影式	模版模式 - 下拉演示	普通模式

呼吸灯	闪光灯	分段视图演示

如何使用

快速看到效果

您只需要四步

import 'TABAnimated.h'
在 didFinishLaunchingWithOptions 中初始化 TABAimated

// init `TABAnimated`, and set the properties you need.
[[TABViewAnimated sharedAnimated] initWithOnlySkeleton];
// demo changes the pattern quietly.
// you can change the pattern in different views.
[TABViewAnimated sharedAnimated].isUseTemplate = YES;
// open log
[TABViewAnimated sharedAnimated].openLog = YES;
// set gobal cornerRadius
[TABViewAnimated sharedAnimated].animatedCornerRadius = 3.f;
复制代码

[self.rootControlView tab_startAnimation]; // 开启动画
[self.rootControlView tab_endAnimation]; // 关闭动画

当然，这只是最简单的使用，并不能很完美的适配

模版模式教程

只有UITableView和UICollectionView支持模板模式。

普通视图使用模板模式其实是多余的。

1.设置 TABAnimatedObject 相关属性

_collectionView.tabAnimated = [TABAnimatedObject animatedWithTemplateClass:[TABTemplateCollectionViewCell class] animatedCount:4];
复制代码

TABAnimatedObject 初始化方法

/**
 单section表格组件初始化方式
 
 @param templateClass 模版cell, animatedCount 为默认值，默认值为填充屏幕
 @return object
 */
+ (instancetype)animatedWithTemplateClass:(Class)templateClass;

/**
 单section表格组件初始化方式

 @param templateClass 模版cell
 @param animatedCount 动画时row值
 @return object
 */
+ (instancetype)animatedWithTemplateClass:(Class)templateClass
                            animatedCount:(NSInteger)animatedCount;

/**
 多section表格组件初始化方式

 @param templateClassArray 模版cell数组
 @param animatedCountArray 动画时row值的集合
 @return object
 */
+ (instancetype)animatedWithTemplateClassArray:(NSArray <Class> *)templateClassArray
                            animatedCountArray:(NSArray <NSNumber *> *)animatedCountArray;
复制代码

数组安全处理：

当animatedCountArray.Count>section.Count时，animatedCountArray上的多余部分无效。

当animatedCountArray.count<section.count时，多余部分将按animatedCountArray.lastObject加载。

创建模版

UITableViewCell的

新建cell，继承自TABBaseTableViewCell
重写+ (NSNumber *)cellHeight 声明模版cell高度
初始化模版对应组件，设置对应frame，支持自动布局

UICollectionViewCell的

新建cell，继承自TABBaseCollectionViewCell
重写+ (NSValue *)cellSize 声明模版cell高度
初始化模版对应组件，设置对应frame，支持自动布局

tips.

TABAnimatedObject的其他属性，请自己查看demo注释
模版可以用你项目中的cell，但是会产生耦合，请开发者自行抉择

普通模式教程

设置tabAnimated相关属性

// 可以不进行手动初始化，将使用默认属性
TABAnimatedObject *tabAnimated = TABAnimatedObject.new;
tabAnimated.animatedCount = 3;
_tableView.tabAnimated = tabAnimated;
复制代码

默认会将所有subViews加入动画队列，可以使用loadStyle的TABViewLoadAnimationRemove将指定view移出(模版同理)

{
        UILabel *lab = [[UILabel alloc]init];
        [lab setFont:tab_kFont(15)];
        lab.loadStyle = TABViewLoadAnimationRemove;   // 移除动画队列
        [lab setTextColor:[UIColor blackColor]];
        titleLab = lab;
        [self.contentView addSubview:lab];
 }
复制代码

Tips

表格使用细节

以下均针对UITableView组件和UICollectionView组件

在加载动画的时候，即未获得数据时，不要设置对应的数值当然这样的话耦合度高，下面说明当前解决方案。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *str = @"TestTableViewCell";
    TestTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:str];
    if (!cell) {
        cell = [[TestTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:str];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }
    
    // 较老版本有变动
    // 在加载动画的时候，即未获得数据时，不要走加载控件数据的方法
    if (!_mainTV.tabAnimated.isAnimating) {
        [cell initWithData:dataArray[indexPath.row]];
    }

    return cell;
}
复制代码

一般情况下刷新数据源的时候，大家都用cellForRowAtIndexPath代理方法，解决方案就是加载视图使用cellForRowAtIndexPath代理方法，刷新数据源使用willDisplayCell代理方法，如下：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *str = @"TestTableViewCell";
    TestTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:str];
    if (!cell) {
        cell = [[TestTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:str];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }
    return cell;
}

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    TestTableViewCell *myCell = (TestTableViewCell *)cell;
    [myCell initWithData:dataArray[indexPath.row]];
}
复制代码

多section通过新增表格代理方法解决，模版也可以用 UITableViewAnimatedDelegate和UICollectionViewAnimatedDelegate

_mainTV.animatedDelegate = self;
复制代码

- (NSInteger)tableView:(UITableView *)tableView numberOfAnimatedRowsInSection:(NSInteger)section {
    if (section == 0) {
        return 5;
    }
    return 3;
}
复制代码

对于嵌套表格组件，需要被嵌套在内的表格组件的isNest属性设为YES 嵌套表格比较特殊，具体看demo

_collectionView.tabAnimated = [[TABAnimatedObject alloc] init];
_collectionView.tabAnimated.isNest = YES;
_collectionView.tabAnimated.animatedCount = 3;
复制代码

其他属性

初始化方法	名称
initWithOnlySkeleton	骨架屏
initWithBinAnimation	呼吸灯动画
initWithShimmerAnimated	闪光灯动画

如果控制视图的superAnimationType做了设置，那么将以superAnimationType声明的动画类型加载

选择设置其他TABAnimated的属性:

属性名称	适用模式	适用动画	含义	默认值
animatedColor	通用	通用	动画颜色	0xEEEEEE
animatedBackgroundColor	通用	通用	动画背景颜色	UIColor.white
animatedDurationShimmer	通用	闪光灯	移动时长	1.5
animatedHeightCoefficient	通用	通用	高度系数	0.75
animatedCornerRadius	通用	通用	全局圆角	0.
templateTableViewCell	模版	通用	通用模版	\
templateCollectionViewCell	模版	通用	通用模版	\
openLog	通用	通用	开启日志	NO