原生骨架屏库，合并模式版本，加入链式语法。

之前有发布过文章，但是之前版本的使用方式都不够方便，快速， 提出的两种模式解耦显得多余，这次重新调整，希望你能喜欢。

最新版 2.0.4

目录

关于 TABAnimated

TABAnimated 的起源版本是模仿简书网页的骨架屏动态效果。 在v1.9探索过模版模式，但是重复的工作量并不利于快速构建， 而且两种模式的存在不合理，所以在v2.1删除了这种设定，但是模版模式的出现到删除，并不是没有收获，相反带来了更合理的实现方案，更便捷的构建方式。

实现原理

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

TABAnimated 通过控制视图的subViews的位置及相关信息创建 TABCompentLayer 。 普通控制视图，有一个 TABLayer 表格视图，每一个cell都有一个 TABLayer TABLayer 负责管理并显示所有的 TABCompentLayer 。

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

优点

• 集成迅速
• 零耦合，易于将其动画逻辑封装到基础库
• 高性能，极少的内存损耗
• 链式语法，方便快捷，可读性高
• 完全自定制，适应99.99%的视图

演变过程

看不清楚可以放大一下

简单说明一下： 第一张图：原有表格组件, 有数据时的展示情况 第二张图：是在该表格组件开启动画后，映射出的动画组，相信你可以看出来，效果并不是很美观。 第三张图：针对这个不美观的动画组，通过回调，进行预处理，下文进行说明

效果图

动态效果	卡片投影	呼吸灯

闪光灯	分段视图	嵌套表格

安装

使用 CocoaPods

pod 'TABAnimated'
复制代码

手动导入

将TABAnimated文件夹拖入工程

使用步骤

您只需要四步

1. 在 didFinishLaunchingWithOptions 中初始化 TABAimated 还有其他的全局属性，下文用表格呈现。

// init `TABAnimated`, and set the properties you need.
[[TABAnimated sharedAnimated] initWithOnlySkeleton];
// open log
[TABAnimated sharedAnimated].openLog = YES;
复制代码

2. 控制视图初始化tabAnimated 普通view:

self.mainView.tabAnimated = TABViewAnimated.new;
self.mainView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        view.animation(1).width(200);
        view.animation(2).width(220);
        view.animation(3).width(180);
 };
复制代码

表格组件：

_collectionView.tabAnimated = 
[TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class] 
                                    cellSize:[NewsCollectionViewCell cellSize]];
_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        view.animation(1).reducedWidth(20).down(2);
        view.animation(2).reducedWidth(-10).up(1);
        view.animation(3).down(5).line(4);
        view.animations(4,3).radius(3).down(5);
};
复制代码

3. 开启动画

[self.collectionView tab_startAnimation];  
复制代码

4. 关闭动画

[self.collectionView tab_endAnimation];
复制代码

UIView 对应 TABViewAnimated UITableView 对应 TABTableAnimated UICollectionView 对应 TABCollectionAnimated 还配有其他的初始化方式，支持多section。

一般情况下，注册的cell用原来的cell进行映射就可以了。

特殊应用场景：

举个例子，新浪微博帖子页面，有很多很多种类型， 这样复杂的页面，上升到动画层面肯定是设计一个统一的动画， 这个时候，你可以重新写一个cell，然后注册到这个表格上，通过本框架映射出你想要的视觉效果，这个也是模版功能演变过来的。

具体其他的详细信息，会继续添加其他文档，或者在github上demo中查看。

扩展回调

扩展回调将动画组给予开发者，开发者可以对其进行调整。 因为是调整，所以加入了链式语法，让开发者快速且方便地调整。

_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        view.animation(1).reducedWidth(20).down(2);
        view.animation(2).reducedWidth(-10).up(1);
        view.animation(3).down(5).line(4);
        view.animations(4,3).radius(3).down(5);
};
复制代码

参数说明（框架中也有详细注释）

view.animation(x): 该view的指定下标的动画个体 TABCompentLayer view.animations(x,x): 该view指定范围的动画个体数组, 用于统一调整 up(x)：向上移动多少 down(x)：向下移动多少 left(x)：向左移动多少 right(x)：向右移动多少 height(x): 修改高度 width(x): 修改宽度 reducedWidth(x): 宽度相比之前，减少多少 reducedHeight(x): 高度相比之前，减少多少 radius(x): 圆角

line(x): 行数 space(x): 间距 这两个参数，如果是多行文本，根据 numberOfLines 数量默认生效 普通的动画个体也可以设置这个两个属性，达到同样的效果

remove(): 移出动画组 toLongAnimation(): 将该个体赋予动态变长动画 toShortAnimation(): 将该个体赋予动态变短动画

特别提醒：

TABAnimated.h
TABViewAnimated.h

优先级： 动画个体参数配置 > 控制视图动画参数配置 > 全局动画参数配置

Tips

1. 问：哪个动画个体对应的是哪个组件？

答：

如果你使用纯代码构建，那么你添加的组件顺序对应的动画数组的下标, 比如第一个添加到cell上的，那么它对应的动画组件就是：view.animation(0) 依次类推，只要打开你的cell文件，看一下层级进行调整就好了。

但是，如果你用xib创建，很遗憾地告诉你，顺序是关联xib文件的顺序。 demo中的xib做了一个错误示范，有坑慎入。 目前没有找到其他很好的方式，也希望收集大家的建议。

2. 多行文本

   

   上文有提到，这里再强调一下， 可以使用.line(x)设置行数 .space(x)设置间距 每一个动画组件都可以设置这两个属性，达到同一个效果。

3. 多section可以通过新增的表格代理方法解决 但是并不建议，因为初始化方法完全可以解决。 UITableViewAnimatedDelegate 和 UICollectionViewAnimatedDelegate

_mainTV.animatedDelegate = self;
复制代码

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

4. 多section时扩展回调使用

_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
            
      if ([view isKindOfClass:[CourseCollectionViewCell class]]) {

      }
            
      if ([view isKindOfClass:[DailyCollectionViewCell class]]) {
            view.animations(1,3).height(14);
            view.animation(2).down(6);
            view.animation(1).up(1);
            view.animation(3).up(6);
      }
  };
复制代码

5. 对于嵌套表格组件，需要在被嵌套在内的表格组件的 isNest 属性设为 YES ，详情请看demo。

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

属性相关

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

全局动画属性:使用方法

[TABAnimated shareAnimated].xxx = xxx;
复制代码

控制视图下所有动画属性配置:使用方法

_tableView.tabAnimated.xxx = xxx;
复制代码