# TABAnimated
**Repository Path**: bigCoww/TABAnimated
## Basic Information
- **Project Name**: TABAnimated
- **Description**: A skeleton screen framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架，包含快速植入，低耦合，兼容复杂视图等特点，提供国内主流骨架屏动画的加载方案，同时支持上拉加载更多、自定制动画。)
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-01
- **Last Updated**: 2021-07-01
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
> + [English Documents](https://github.com/tigerAndBull/TABAnimated/blob/master/README_EN.md)
## 骨架屏是什么？
骨架屏(Skeleton Screen)是一种优化用户弱网体验的方案。在弱网情况下，客户端获取到服务器数据的时间会比较长，此时用户会比较烦躁。该方案是指在空白页面提供与原视图结构一致的灰色区块。使得用户在未获得数据前，提前看到视图的轮廓，以缓解用户等待时的烦躁情绪。
## TABAnimated是什么？
TABAnimated是提供给iOS开发者自动生成骨架屏的一种解决方案。开发者可以将已经开发好的视图，通过配置一些全局/局部的参数，自动生成与其长相一致的骨架屏。也就是说开发者不需要额外开发成本，就可以获得和需求一致的骨架屏。
当然，TABAnimated会管理你的骨架屏生命周期。
## 目录
* [集成优势](#集成优势)
* [效果展示](#效果展示)
* [演示过程](#演示过程)
* [集成步骤](#集成步骤)
* [问题检索](#问题检索)
* [最后强调](#最后强调)
## 集成优势
通过TABAnimated集成的骨架屏有什么优势？
- 是一种自动化方案，实现速度快
- 与业务低耦合，易于集成和移除
- 配有缓存功能，压测切换控制器不掉帧
- 针对iOS原生视图处理，适用场景广
- 自由度高，可以完全自定制，包括动画及其序列化
- 自动切换暗黑模式骨架屏
- 支持上拉加载时显示骨架屏
- 可以配合InjectionIII实时预览集成效果
## 效果展示
| 闪光动画 | 经典动画 | 下坠动画 |
| ------ | ------ | ------ |
|  |  |  |
| 呼吸动画 | 上拉加载 | 复杂场景 |
| ------ | ------ | ------ |
| |  |  |
**暗黑模式：**
| 工具箱切换 | setting页面切换 |
| ------ | ------ |
|  |  |
**实时预览：**
## 演示过程
下面通过一个小例子，更深入地了解一下TABAnimated。
#### 1. 小明和小张有一个下图这样的视图，需要集成骨架屏
#### 2. 下面是通过TABAnimated自动化生成的效果
#### 3. 小明做这个需求说，这个效果我很满意，那么小明的工作到此就结束了。但是小张说，我感觉长度，高度，虽然和原视图很像，但是作为一种动画效果我不太满意，不够精致。于是，他通过（预处理回调+链式语法），很快地做了如下调整。
当然啦，每个人有不同的审美，每个产品有不同的需求，这些就全交由你来把握啦～
## 集成步骤
### 一、导入到工程中
- CocoaPods
```
pod 'TABAnimated', '2.5.7'
```
- Carthage
```
github "tigerAndBull/TABAnimated"
```
- 将TABAnimated文件夹拖入工程
**注意: 在github上下载的演示demo，为了很好的模拟真实的应用场景，使用了一些大家都熟悉的第三方，但是TABAnimated自身并不依赖他们。**
### 二、全局参数初始化
在 `didFinishLaunchingWithOptions` 中初始化 `TABAimated`
```
[[TABAnimated sharedAnimated] initWithOnlySkeleton];
[TABAnimated sharedAnimated].openLog = YES;
```
**注意：还有其他的动画类型、全局属性，在框架中都有注释。**
### 三、控制视图初始化
**控制视图：如果是列表视图，那么就是UITableView/UICollectionView，有文档具体讲解。**
`NewsCollectionViewCell`就是你列表中用到的cell，当然你要绑定其他cell，也是完全可以的！
```
_collectionView.tabAnimated =
[TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class]
cellSize:[NewsCollectionViewCell cellSize]];
```
**注意：**
- **有其他初始化方法，比如常见的多种cell，在框架中都有注释**
- **有针对这个控制视图的局部属性，在框架中都有注释**
### 四、控制骨架屏开关
1. 开启动画
```
[self.collectionView tab_startAnimation];
```
2. 关闭动画
```
[self.collectionView tab_endAnimation];
```
### 五、刚刚说到的，预处理回调+链式语法怎么用？
OC
使用变量名修改
```
_tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
manager.animationN(@"titleImageView").down(3).radius(12);
manager.animationN(@"nameLabel").height(12).width(110);
manager.animationN(@"timeButton").down(-5).height(12);
};
```
使用index修改
```
_tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
manager.animation(1).down(3).radius(12);
manager.animation(2).height(12).width(110);
manager.animation(3).down(-5).height(12);
};
```
Swift
```
tableView.tabAnimated?.adjustBlock = { manager in
manager.animation()?(1)?.down()(3)?.radius()(12)
manager.animation()?(2)?.height()(12)?.width()(110)
manager.animation()?(3)?.down()(-5)?.height()(12)
}
```
#### 1. 有的人看到上面，可能一下子就被吓到了，集成需要这么复杂吗？
答：需不需要异步调整，需要调整到什么程度，与你自身约束、产品需求，都有关系。所以并不能自动生成让任何产品、任何人立即都完全满意的效果。
你大可放心，推出这个功能反而是协助开发者更快速调整自己想要的结果。**
#### 2. `manager.animation(x)`和 `manager.animationN(@"x")`
答：在appDelegate设置TABAnimated的`openAnimationTag`属性为YES，框架就会自动为你指示，究竟x是几。
其实是视图addSubView尾递归排序
```
[TABAnimated sharedAnimated].openAnimationTag = YES;
```
**animationN(@"x")**
x是变量名，不支持局部变量名
#### 3. 通过几个示例，具体了解（预处理回调+链式语法）
- 假如第0个元素的高度和宽度不合适
```
manager.animation(0).height(12).width(110);
```
- 假如第1个元素需要使用占位图
```
manager.animation(1).placeholder(@"占位图名称.png");
```
- 假如第1，2，3个元素宽度都为50
```
manager.animations(1,3).width(50);
```
- 假如第1，5，7个元素需要下移5px
```
manager.animationWithIndexs(1,5,7).down(5);
```
#### 表格集成必看
(1) 在你集成表格视图之前，一定要理清你自己的视图结构：
分为以下三种
+ 以section为单元，section和cell样式一一对应
+ 视图只有1个section, 但是对应多个cell
+ 动态section：你的section数量是网络获取的
(2) 明白你自己的需求：
+ 设置多个section/row，一起开启动画
+ 设置多个section/row，部分开启动画
(3) 最后到框架内找到对应的初始化方法、启动动画方法即可！
## 问题检索
**当然啦，在实际应用中，我们还有各式各样的视图，TABAnimated经历了很多产品的考验，统统都可以应对。
但是光凭上面的知识肯定是不够的，以下是更详细说明文档。**
- 最好要阅读的文档：
> + [缓存策略和线程处理](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5%E5%92%8C%E7%BA%BF%E7%A8%8B%E5%A4%84%E7%90%86.md)
> + [架构设计和性能测试](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1%E5%92%8C%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95.md)
- 可能会用到的文档：
> + [预处理回调动画元素下标问题](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E5%8A%A8%E7%94%BB%E5%85%83%E7%B4%A0%E4%B8%8B%E6%A0%87%E9%97%AE%E9%A2%98.md)
> + [问题答疑文档](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E9%97%AE%E9%A2%98%E7%AD%94%E7%96%91%E6%96%87%E6%A1%A3.md)、[版本信息记录文档](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E5%8D%87%E7%BA%A7%E6%96%87%E6%A1%A3%E5%92%8C%E5%85%B6%E4%BB%96%E4%BF%AE%E5%A4%8D.md)
> + [全局:局部属性、链式语法api](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E5%85%A8%E5%B1%80:%E5%B1%80%E9%83%A8%E5%B1%9E%E6%80%A7%E3%80%81%E9%93%BE%E5%BC%8F%E8%AF%AD%E6%B3%95api.md)
- 其他实现原理文档
> + [豆瓣动画详解](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E8%B1%86%E7%93%A3%E5%8A%A8%E7%94%BB%E8%AF%A6%E8%A7%A3.md)
> + [不再hook setDelegate和setDataSource](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E4%B8%8D%E5%86%8Dhook%20setDelegate%E5%92%8CsetDataSource.md)
> + [上拉加载更多](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD%E5%8A%9F%E8%83%BD.md)
## 最后强调
- 有问题一定要先看issues和documents
- demo主要是引导作用，提供不同结构视图的集成方案，开发者可以自己定制出更精美的效果
- 如有使用问题、优化建议、好的想法等，可以关注公众号：tigerAndBull技术分享，加群快速解决
## 交流群
## License
All source code is licensed under the [License](https://github.com/tigerAndBull/TABAnimated/blob/master/LICENSE)