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

tigerAndBull醬發表於2019-05-02
模式

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

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

最新版 2.0.4

目錄

關於 TABAnimated

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

實現原理

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

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

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

優點

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

演變過程

看不清楚可以放大一下

原檢視.png

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

效果圖

動態效果 卡片投影 呼吸燈
動態動畫.gif
卡片投影.gif
呼吸燈.gif
閃光燈 分段檢視 巢狀表格
閃光燈.gif
分段檢視.gif
巢狀表格.gif

安裝

使用 CocoaPods

pod 'TABAnimated'
複製程式碼

手動匯入

將TABAnimated資料夾拖入工程

使用步驟

您只需要四步

  1. 在 didFinishLaunchingWithOptions 中初始化 TABAimated 還有其他的全域性屬性，下文用表格呈現。
// 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。

一般情況下，註冊的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.png
    上文有提到，這裡再強調一下， 可以使用.line(x)設定行數 .space(x)設定間距 每一個動畫元件都可以設定這兩個屬性，達到同一個效果。

  2. 多section可以通過新增的表格代理方法解決 但是並不建議，因為初始化方法完全可以解決。 UITableViewAnimatedDelegate和UICollectionViewAnimatedDelegate

_mainTV.animatedDelegate = self;
複製程式碼
- (NSInteger)tableView:(UITableView *)tableView numberOfAnimatedRowsInSection:(NSInteger)section {
    if (section == 0) {
        return 5;
    }
    return 3;
}
複製程式碼
  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;
複製程式碼

屬性相關

初始化方法 名稱
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.
openLog 通用 開啟日誌 NO

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

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

強調：

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

最後：

  • 感謝相遇，感謝使用，如果您覺得不錯可以在github上點個star
  • 如有使用問題，優化建議等，加入交流群更快解決:304543771
  • github地址：github.com/tigerAndBul…

相關文章