骨架屏是什么？
骨架屏(Skeleton Screen)是一種優化用戶弱網體驗的方案。在弱網情況下，客戶端獲取到服務器數據的時間會比較長，此時用戶會比較煩躁。該方案是指在空白頁面提供與原視圖結構一致的灰色區塊。使得用戶在未獲得數據前，提前看到視圖的輪廓，以緩解用戶等待時的煩躁情緒。
TABAnimated是什么？
TABAnimated是提供給iOS開發者自動生成骨架屏的一種解決方案。開發者可以將已經開發好的視圖，通過配置一些全局/局部的參數，自動生成與其長相一致的骨架屏。也就是說開發者不需要額外開發成本，就可以獲得和需求一致的骨架屏。
當然，TABAnimated會管理你的骨架屏生命周期。
目錄
- 項目優勢
- 效果展示
- 場景還原
- 集成步驟
- 問題檢索
- Tips
項目優勢
通過TABAnimated集成的骨架屏有什么優勢？
- 是一種自動化方案，實現速度快
- 零耦合，易于集成和移除
- 配有緩存功能，壓測切換控制器不掉幀
- 針對iOS原生視圖處理，適用場景廣
- 自由度高，可以完全自定制，包括動畫及其序列化
- 自動切換暗黑模式骨架屏
- 支持上拉加載時顯示骨架屏
- 可以配合InjectionIII實時預覽集成效果
效果展示
| 閃光動畫 | 經典動畫 | 下墜動畫 |
|---|---|---|
 閃光動畫.gif
|
 經典動畫.gif
|
 下墜動畫.gif
|
| 呼吸動畫 | 上拉加載 | 復雜場景 |
|---|---|---|
 呼吸動畫.gif
|
 上拉加載.gif
|
 復雜場景.gif
|
場景還原
下面通過一個小例子，更深入地了解一下TABAnimated。
1. 小明和小張有一個下圖這樣的視圖，需要集成骨架屏
2. 下面是通過TABAnimated自動化生成的效果
3. 小明做這個需求說，這個效果我很滿意，那么小明的工作到此就結束了。但是小張說，我感覺長度，高度，雖然和原視圖很像，但是作為一種動畫效果我不太滿意，不夠精致。于是，他通過（預處理回調+鏈式語法），很快地做了如下調整。
當然啦，每個人有不同的審美，每個產品有不同的需求，這些就全交由你來把握啦～
集成步驟
一、導入到工程中
- CocoaPods
pod 'TABAnimated', '2.6.4'
- 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，在框架中都有注釋
- 有針對這個控制視圖的局部屬性，在框架中都有注釋
四、控制骨架屏開關
- 開啟動畫
[self.collectionView tab_startAnimation];
- 關閉動畫
[self.collectionView tab_endAnimation];
五、剛剛說到的，預處理回調+鏈式語法怎么用？
支持兩種
通過變量名
_tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
manager.animationN(@"titleLabel").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);
};
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);
表格類型視圖集成必看（UITableView/UICollectionView）
(1) 在你集成表格視圖之前，一定要理清你自己的視圖結構：
分為以下三種
- 以section為單元，section和cell樣式一一對應
- 視圖只有1個section, 但是對應多個cell
- 動態section：你的section數量是網絡獲取的
(2) 明白你自己的需求：
- 設置多個section/row，一起開啟動畫
- 設置多個section/row，部分開啟動畫
(3) 最后到框架內找到對應的初始化方法、啟動動畫方法即可！
問題檢索
當然啦，在現實中，我們還有各式各樣的視圖，TABAnimated經歷了很多產品的考驗，統統都可以應對。
但是光憑上面的知識肯定是不夠的，以下是更詳細說明文檔。
- 最好要閱讀的文檔：
- 可能會用到的文檔：
- 其他實現原理文檔
Tips
- 有問題優先看issues和documents
- demo提供不同結構視圖的集成方案，開發者可以自己定制出更精美的效果
