ios - 原生骨架庫，網絡過渡動畫封裝

最新版 2.0.5，release版本

目錄

• 關於 TABAnimated
• 實現原理
• 優勢
• 演變過程
• 效果圖

• 安裝

  • 使用Cocoapods
  • 手動導入
• 使用步驟
• 擴展回調
• Tips
• 屬性相關
• 強調
• 最後

關於 TABAnimated

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

實現原理

TABAnimated 須要一個控制視圖，進行開關動畫。該控制視圖下的全部subViews都將加入動畫隊列。

TABAnimated經過控制視圖的subViews的位置及相關信息建立TABCompentLayer。
普通控制視圖，有一個TABLayer
表格視圖，每個cell都有一個TABLayer
TABLayer負責管理並顯示全部的TABCompentLayer。

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

優勢

• 集成迅速
• 零耦合，易於將其動畫邏輯封裝到基礎庫
• 高性能，極少的內存損耗
• 鏈式語法，方便快捷，可讀性高
• 徹底自定製，適應99.99%的視圖

演變過程

看不清楚能夠放大一下

簡單說明一下：
第一張圖：原有表格組件, 有數據時的展現狀況
第二張圖：是在該表格組件開啓動畫後，映射出的動畫組，相信你能夠看出來，效果並非很美觀。
第三張圖：針對這個不美觀的動畫組，經過回調，進行預處理，下文進行說明

效果圖

| 動態效果 | 卡片投影 | 呼吸燈 |
| ------ | ------ | ------ |
| | | |

| 閃光燈 | 分段視圖 | 嵌套表格 |
| ------ | ------ | ------ |
| | | |

安裝

使用 CocoaPods

pod 'TABAnimated'

手動導入

將TABAnimated文件夾拖入工程

使用步驟

您只須要四步

1. 在 didFinishLaunchingWithOptions 中初始化 TABAimated

還有其餘的全局屬性，下文用表格呈現。

**老用戶注意：
原TABViewAnimated已經更名爲TABAnimated**
現在的TABViewAnimated已經成爲UIView的骨架對象

// 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，指定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(x)設置行數 .space(x)設置間距
每個動畫組件均可以設置這兩個屬性，達到同一個效果。

1. 指定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);
};

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.
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

強調：

1. demo也只是簡單的引導做用，

你能夠訂製更精美的效果，高效解決99.99%視圖骨架

1. 以上的說明，demo上都有詳細介紹和案例，

遇到問題先去demo上看看有沒有使用示例

最後：

• 感謝相遇，感謝使用，若是您以爲不錯能夠在github上點個star
• 若有使用問題，優化建議等，加入交流羣更快解決:304543771
• github地址：https://github.com/tigerAndBu...