原生骨架屏

骨架屏是什麼？

找到這裏的同志，或多或少都對骨架屏有所瞭解，請允許我先囉嗦一句。骨架屏(Skeleton Screen)是一種優化用戶弱網體驗的方案，能夠有效緩解用戶等待的焦躁情緒。

TABAnimated是什麼？

TABAnimated是提供給iOS開發者自動生成骨架屏的一種解決方案。開發者能夠將已經開發好的視圖，經過TABAnimated配置一些全局/局部的參數，自動生成與其長相一致的骨架屏。 固然，TABAnimated會協助你管理骨架屏的生命週期。

目錄

• 集成優點
• 效果展現
• 演示過程
• 集成步驟
• 問題檢索
• 最後強調

集成優點

經過TABAnimated集成的骨架屏有什麼優點？

• 是一種自動化方案，集成速度很快
• 零耦合，易於將其動畫邏輯封裝到基礎庫，且移除方便
• 配有緩存功能，壓測切換控制器不卡頓
• 適用場景廣，能夠適用開發中99%的視圖
• 自由度很是高，能夠徹底地自定製

效果展現

動態效果	卡片投影	呼吸燈

閃光燈	分段視圖	豆瓣效果

演示過程

下面經過一個小例子，更深刻地瞭解一下TABAnimated。

1. 小明和小張有一個下圖這樣的視圖，須要集成骨架屏

2. 下面是經過TABAnimated自動化生成的效果

3. 小明作這個需求說，這個效果我很滿意，那麼小明的工做到此就結束了。可是小張說，我感受長度，高度，雖然和原視圖很像，可是做爲一種動畫效果我不太滿意，不夠精緻。因而，他經過（預處理回調+鏈式語法），很快地作了以下調整。

固然啦，每一個人有不一樣的審美，每一個產品有不一樣的需求，這些就全交由你來把握啦～

集成步驟

1、導入到工程中

• CocoaPods

pod 'TABAnimated'
複製代碼

• Carthage

github "tigerAndBull/TABAnimated"
複製代碼

• 將TABAnimated文件夾拖入工程

注意: 在github上下載的演示demo，爲了很好的模擬真實的應用場景，使用了一些你們都熟悉的第三方，可是TABAnimated自身並不依賴他們。

2、全局參數初始化

在 didFinishLaunchingWithOptions 中初始化 TABAimated

[[TABAnimated sharedAnimated] initWithOnlySkeleton];
[TABAnimated sharedAnimated].openLog = YES;
複製代碼

注意：還有其餘的動畫類型、全局屬性，在框架中都有註釋。

3、控制視圖初始化

控制視圖：若是是列表視圖，那麼就是UITableView/UICollectionView，有文檔具體講解。

NewsCollectionViewCell就是你列表中用到的cell，固然你要綁定其餘cell，也是徹底能夠的！

_collectionView.tabAnimated = 
[TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class] 
cellSize:[NewsCollectionViewCell cellSize]];
複製代碼

注意：

• 有其餘初始化方法，好比常見的多種cell，在框架中都有註釋
• 有針對這個控制視圖的局部屬性，在框架中都有註釋

4、控制骨架屏開關

1. 開啓動畫

[self.collectionView tab_startAnimation];  
複製代碼

2. 關閉動畫

[self.collectionView tab_endAnimation];
複製代碼

5、剛剛說到的，預處理回調+鏈式語法怎麼用？

_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)，x是多少？

答：在appDelegate設置TABAnimated的openAnimationTag屬性爲YES，框架就會自動爲你指示，究竟x是幾

[TABAnimated sharedAnimated].openAnimationTag = YES;
複製代碼

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);
複製代碼

問題檢索

固然啦，在現實中，咱們還有各式各樣的視圖，TABAnimated經歷了不少產品的考驗，通通均可以應對。 可是光憑上面的知識確定是不夠的，如下是更詳細說明文檔。

• 你最好要（必須）閱讀的文檔：

• 緩存策略和線程處理

• 你最可能用到的文檔：

• 預處理回調動畫元素下標問題
• 問題答疑文檔
• 全局:局部屬性、鏈式語法api

• 你可能用到的輔助工具、技術和其餘文檔

• 實時預覽工具
• 豆瓣動畫詳解
• 再也不hook setDelegate和setDataSource

若是你仍沒法解決問題，能夠儘快聯繫我，我相信TABAnimated是能夠解決99%的需求的

最後強調：

• 有問題要先看demo和文檔哈，基本都有～
• demo也只是引導的做用，你能夠本身設置出更精美的效果
• 若有使用問題，優化建議等，能夠直接提issue，能夠加交流羣反饋: 304543771
• github地址：github.com/tigerAndBul…