ios原生骨架库，网络过渡动画封装

最新版 2.0.5，release版本

目录

• 关于 TABAnimated
• 实现原理
• 优点
• 演变过程
• 效果图

• 安装

  • 使用Cocoapods
  • 手动导入
• 使用步骤
• 扩展回调
• Tips
• 属性相关
• 强调
• 最后

关于 TABAnimated

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

实现原理

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

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

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

优点

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

演变过程

看不清楚可以放大一下

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

效果图

| 动态效果 | 卡片投影 | 呼吸灯 |
| &＃8212;&＃8212; | &＃8212;&＃8212; | &＃8212;&＃8212; |
| | | |

| 闪光灯 | 分段视图 | 嵌套表格 |
| &＃8212;&＃8212; | &＃8212;&＃8212; | &＃8212;&＃8212; |
| | | |

安装

使用 CocoaPods

pod 'TABAnimated'

手动导入

将TABAnimated文件夹拖入工程

使用步骤

您只需要四步

1. 在 didFinishLaunchingWithOptions 中初始化 TABAimated

还有其他的全局属性，下文用表格呈现。

**老用户注意：
原TABViewAnimated已经改名为TABAnimated**
如今的TABViewAnimated已经成为UIView的骨架对象

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

1. 控制视图初始化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);
};

1. 开启动画

[self.collectionView tab_startAnimation];

1. 关闭动画

[self.collectionView tab_endAnimation];

UIView 对应 TABViewAnimated
UITableView 对应 TABTableAnimated
UICollectionView 对应 TABCollectionAnimated

还配有其他的初始化方式，支持多section，指定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做了一个错误示范，有坑慎入。
目前没有找到其他很好的方式，也希望收集大家的建议。

1. 多行文本

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

1. 指定section加载动画的初始化方法

举个例子：
比如 animatedSectiOnArray= @[@(3),@(4)];
意思是 cellHeightArray,animatedCountArray,cellClassArray数组中的第一个元素，是分区为3时的动画数据。

// 部分section有动画
_tableView.tabAnimated =
[TABTableAnimated animatedWithCellClassArray:@[[TestTableViewCell class]]
cellHeightArray:@[@(100)]
animatedCountArray:@[@(1)]
animatedSectionArray:@[@(1)]];

_tableView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
view.animation(1).down(3).height(12).toShortAnimation();
view.animation(2).height(12).width(110).toLongAnimation();
view.animation(3).down(-5).height(12);
};

1. 多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);
}
};

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

_collectionView.tabAnimated = [[TABAnimatedObject alloc] init];
_collectionView.tabAnimated.isNest = YES;
_collectionView.tabAnimated.animatedCount = 3;

属性相关

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

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

全局动画属性:
使用方法

[TABAnimated shareAnimated].xxx = xxx;

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

_tableView.tabAnimated.xxx = xxx;

强调：

1. demo也只是简单的引导作用，

你可以订制更精美的效果，高效解决99.99%视图骨架

1. 以上的说明，demo上都有详细介绍和案例，

遇到问题先去demo上看看有没有使用示例

最后：

• 感谢相遇，感谢使用，如果您觉得不错可以在github上点个star
• 如有使用问题，优化建议等，加入交流群更快解决:304543771
• github地址：https://github.com/tigerAndBu&＃8230;