原生骨架屏庫，合併模式版本，加入鏈式語法。

tigerAndBull醬發表於2019-05-02

之前有釋出過文章，但是之前版本的使用方式都不夠方便，快速，提出的兩種模式解耦顯得多餘，這次重新調整，希望你能喜歡。

關於 TABAnimated

TABAnimated的起源版本是模仿簡書網頁的骨架屏動態效果。在v1.9探索過模版模式，但是重複的工作量並不利於快速構建，而且兩種模式的存在不合理，所以在v2.1刪除了這種設定，但是模版模式的出現到刪除，並不是沒有收穫，相反帶來了更合理的實現方案，更便捷的構建方式。

實現原理

TABAnimated 需要一個控制檢視，進行開關動畫。該控制檢視下的所有subViews都將加入動畫佇列。

TABAnimated通過控制檢視的subViews的位置及相關資訊建立TABCompentLayer。普通控制檢視，有一個TABLayer 表格檢視，每一個cell都有一個TABLayer TABLayer負責管理並顯示所有的TABCompentLayer。

當使用約束進行佈局時，約束不足且沒有資料時，致使subViews的位置資訊不能體現出來，TABAnimated會進行資料預填充。

優點

整合迅速
零耦合，易於將其動畫邏輯封裝到基礎庫
高效能，極少的記憶體損耗
鏈式語法，方便快捷，可讀性高
完全自定製，適應99.99%的檢視

演變過程

看不清楚可以放大一下

簡單說明一下：第一張圖：原有表格元件, 有資料時的展示情況第二張圖：是在該表格元件開啟動畫後，對映出的動畫組，相信你可以看出來，效果並不是很美觀。第三張圖：針對這個不美觀的動畫組，通過回撥，進行預處理，下文進行說明

效果圖

動態效果	卡片投影	呼吸燈

閃光燈	分段檢視	巢狀表格

安裝

使用 CocoaPods

pod 'TABAnimated'
複製程式碼

手動匯入

將TABAnimated資料夾拖入工程

使用步驟

您只需要四步

在 didFinishLaunchingWithOptions 中初始化 TABAimated 還有其他的全域性屬性，下文用表格呈現。

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

控制檢視初始化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);
};
複製程式碼

開啟動畫

[self.collectionView tab_startAnimation];  
複製程式碼

關閉動畫

[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

問：哪個動畫個體對應的是哪個元件？

答：

如果你使用純程式碼構建，那麼你新增的元件順序對應的動畫陣列的下標, 比如第一個新增到cell上的，那麼它對應的動畫元件就是：view.animation(0) 依次類推，只要開啟你的cell檔案，看一下層級進行調整就好了。

但是，如果你用xib建立，很遺憾地告訴你，順序是關聯xib檔案的順序。 demo中的xib做了一個錯誤示範，有坑慎入。目前沒有找到其他很好的方式，也希望收集大家的建議。

多行文字
上文有提到，這裡再強調一下，可以使用.line(x)設定行數 .space(x)設定間距每一個動畫元件都可以設定這兩個屬性，達到同一個效果。
指定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);
};
複製程式碼

多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);
      }
  };
複製程式碼

對於巢狀表格元件，需要在被巢狀在內的表格元件的isNest屬性設為YES，詳情請看demo。

_collectionView.tabAnimated = [[TABAnimatedObject alloc] init];
_collectionView.tabAnimated.isNest = YES;
_collectionView.tabAnimated.animatedCount = 3;
複製程式碼

屬性相關

初始化方法	名稱
initWithOnlySkeleton	骨架屏
initWithBinAnimation	呼吸燈動畫
initWithShimmerAnimated	閃光燈動畫

如果控制檢視的superAnimationType做了設定，那麼將以superAnimationType宣告的動畫型別載入

全域性動畫屬性: 使用方法

[TABAnimated shareAnimated].xxx = xxx;
複製程式碼

屬性名稱	適用動畫	含義	預設值
animatedColor	通用	動畫顏色	0xEEEEEE
animatedBackgroundColor	通用	動畫背景顏色	UIColor.white
animatedDuration	動態動畫	來回移動時長	1.0
longToValue	動態動畫	伸縮比例	1.9
shortToValue	動態動畫	伸縮比例	0.6
animatedDurationShimmer	閃光燈	移動時長	1.5
animatedHeightCoefficient	通用	高度係數	0.75
useGlobalCornerRadius	通用	開啟全域性圓角	NO
animatedCornerRadius	通用	全域性圓角	0.
useGlobalAnimatedHeight	不適用UIImageView	使用全域性動畫高度	NO
animatedHeight	不適用UIImageView	全域性動畫高度	12.
openLog	通用	開啟日誌	NO

控制檢視下所有動畫屬性配置: 使用方法

_tableView.tabAnimated.xxx = xxx;
複製程式碼

屬性名稱	適用範圍	含義	預設值
superAnimationType	通用	該控制檢視動畫型別	預設使用全域性屬性
animatedCount	表格元件	動畫數量	填滿表格可視區域
animatedColor	通用	動畫內容顏色	UIColor.white
animatedBackgroundColor	通用	動畫背景顏色	0xEEEEEE
cancelGlobalCornerRadius	通用	取消使用全域性圓角	NO
animatedCornerRadius	通用	該控制檢視下動畫圓角	0.
animatedHeight	通用	該控制檢視下動畫高度	0.
isAnimating	通用	是否在動畫中	\
isNest	通用	是否是被巢狀的表格	NO
canLoadAgain	通用	是否可以重複啟動動畫	NO

強調：

demo也只是簡單的引導作用，你可以訂製更精美的效果，高效解決99.99%檢視骨架
以上的說明，demo上都有詳細介紹和案例，遇到問題先去demo上看看有沒有使用示例

最後：

感謝相遇，感謝使用，如果您覺得不錯可以在github上點個star

如有使用問題，優化建議等，加入交流群更快解決:304543771

github地址：github.com/tigerAndBul…

react骨架屏
2018-01-04
React
小程式之骨架屏
2020-03-23
Flutter 實現骨架屏
2024-09-30
Flutter
前端骨架屏方案小結
2018-10-16
前端
用純 DOM 的方式結合 Puppeteer 自動生成網頁骨架屏
2018-10-28
網頁
【神器】視覺化建立骨架屏
2019-03-04
視覺化
客戶端骨架屏實現
2019-01-04
客戶端
在vue專案中使用骨架屏
2021-05-23
Vue
Vue專案骨架屏注入實踐
2018-08-19
Vue
VUE單頁應用骨架屏方案
2019-01-16
Vue
小程式骨架屏動態注入元件
2018-12-05
元件
骨架屏(page-skeleton-webpack-plugin)初探
2020-10-20
WebPlugin
Vue 頁面骨架屏注入實踐
2018-05-25
Vue
Vue頁面骨架屏注入實踐
2018-05-12
Vue
啟發式合併
2024-10-08
使用CSS自定義屬性構建骨架屏
2019-03-04
CSS
JavaScript 新語法「雙問號語法」與「可選鏈語法」
2020-05-08
JavaScript
樹上啟發式合併
2024-05-02
Go語言中的併發模式
2024-11-03
Go模式
骨架屏（Skeleton Screen）在Android中的應用
2019-03-01
Android
Android 提升使用者體驗之骨架屏
2019-03-10
Android
PyTorch推出0.2版本：加入分散式機器學習功能
2017-08-07
PyTorch分散式機器學習
Go高效併發 11 | 併發模式：Go 語言中即學即用的高效併發模式
2021-02-19
Go模式
Hbase-原理-region合併和hfile的合併（大合併、小合併）
2020-11-27
vue.js 實踐總結（三）Skeleton 骨架屏渲染
2019-03-03
Vue.js
使用VS Code作為版本合併編輯器
2022-07-26
Builder模式與Java語法
2019-02-06
UI模式Java
JavaScript 函式語法
2019-03-24
JavaScript函式
CSS的樣式合併與模組化
2015-03-18
CSS
樹上啟發式合併總結
2024-04-12
Rust語言之GoF設計模式：責任鏈模式
2022-09-26
RustGo設計模式
設計模式第二篇，鏈式方法模式
2020-09-25
設計模式
區塊鏈中的分散式模式
2017-08-06
區塊鏈分散式模式
PHP 圖片的合併，微信小程式碼合併，文字合併
2023-03-27
PHP微信小程式
設計模式之責任鏈模式——Java語言描述
2019-01-13
設計模式Java
Go併發模式：管道和顯式取消
2014-04-25
Go模式
MySQL 函式語法整理
2020-12-12
MySql函式
Generator函式語法解析
2018-01-28
函式