本文目錄

• 效果圖
• 框架思維導圖
• 使用教程

效果圖

閃光燈模式

骨架屏模式

經典動畫模式

本項目思維導圖

交流群

為了方便進行交流和解決問題，可以加入TABAnimated交流群，保證只進行技術問題的討論，群號：304543771

簡要說明

一般情況下，移動端在展示服務器端數據時需要經歷
創建視圖 - 請求數據 - 得到數據并展示 三個步驟 本框架在未獲得到數據的這段空檔期內，根據視圖已有的位置信息，映射出一組相同的CALayer視圖以及部分動畫，在獲取到數據后，開發者主動結束動畫時一并移除掉。

使用流程

第一步：Install

CocoaPods

搜索：pod search TABAnimated
安裝：pod 'TABAnimated', '~> x.x.x'

第二步：在AppDelegate的didFinishLaunchingWithOptions方法全局設置TABAnimated的相關屬性

// 簡單的示例 [[TABViewAnimated sharedAnimated]initWithOnlySkeleton]; 初始化目錄名稱是否全局superAnimationType

Default Animation	經典動畫模式	是	該屬性無效
Shimmer Animation	閃光燈模式	是	該屬性無效
OnlySkeleton	骨架屏模式	是	該屬性無效
Custom Animation	自定義模式	否	該屬性有效

說明：

全局：項目中所有視圖的所有動畫，都是你所指定的初始化方法的那一種

非全局：父視圖通過設置`superAnimationType`，指定該父視圖下的所有子視圖的動畫類型（默認為經典動畫類型）

所以第四種初始化方式和superAnimationType屬性的意義：使得項目中可以用兩種以上動畫類型

Shimmer和OnlySkeleton的動畫，不需要為子視圖指定動畫類型，將默認設置為TABAnimationTypeOnlySkeleton,您可以使用demo查看效果（后面有提到）

選擇設置其他TABAnimated的屬性:

屬性名稱適用模式含義默認值

animatedColor	所有模式	動畫顏色	0xEEEEEE
animatedDuration	經典動畫模式	伸展來回時長	0.4
longToValue	經典動畫模式	伸展變長時長度	1.6
shortToValue	經典動畫模式	伸展變短時長度	0.6
animatedDurationShimmer	閃光燈模式	閃光燈移動時長	1.5

第三步，父視圖需要的操作：在需要動畫的view上，將屬性animatedStyle設置為TABTableViewAnimationStart,不需要動畫的view不用做額外的操作

// UIView和UICollectionView枚舉 typedef NS_ENUM(NSInteger,TABViewAnimationStyle) {TABViewAnimationDefault = 0, // 默認,沒有動畫TABViewAnimationStart, // 開始動畫TABViewAnimationRuning, // 動畫中TABViewAnimationEnd, // 結束動畫TABCollectionViewAnimationStart, // CollectionView 開始動畫TABCollectionViewAnimationRunning, // CollectionView 動畫中TABCollectionViewAnimationEnd // CollectionView 結束動畫 };// UITableView枚舉 typedef NS_ENUM(NSInteger,TABViewAnimationStyle) {TABViewAnimationDefault = 0, // 沒有動畫，默認TABViewAnimationStart, // 開始動畫TABViewAnimationEnd // 結束動畫 }; // UITableView例子 - (UITableView *)mainTV {if (!_mainTV) {_mainTV = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];_mainTV.animatedStyle = TABTableViewAnimationStart; // 開啟動畫_mainTV.delegate = self;_mainTV.dataSource = self;_mainTV.rowHeight = 100;_mainTV.backgroundColor = [UIColor whiteColor];_mainTV.estimatedRowHeight = 0;_mainTV.estimatedSectionFooterHeight = 0;_mainTV.estimatedSectionHeaderHeight = 0;_mainTV.separatorStyle = UITableViewCellSeparatorStyleNone;}return _mainTV; }// UIView例子 - (TestHeadView *)headView {if (!_headView) {_headView = [[TestHeadView alloc]initWithFrame:CGRectMake(0, 0, tab_kScreenWidth, 90)];_headView.animatedStyle = TABViewAnimationStart; //開啟動畫}return _headView; }

第四步，子視圖需要的操作 (只有經典動畫模式，包括自定義模式下的經典動畫需要此操作)：

將需要動的組件的屬性loadStyle，設置為需要的類型（不需要動的組件不用做額外的操作）

2.（盡量不要使用）屬性tabViewWidth，tabViewHeight，其為動畫開啟時該組件的寬度,高度，有默認值

typedef enum {TABViewLoadAnimationDefault = 0, //默認沒有動畫TABViewLoadAnimationShort, //動畫先變短再變長TABViewLoadAnimationLong //動畫先變長再變短 }TABViewLoadAnimationStyle; //view動畫類型枚舉 {UILabel *lab = [[UILabel alloc]init];[lab setFont:tab_kFont(15)];lab.loadStyle = TABViewLoadAnimationLong;lab.tabViewWidth = 100;lab.tabViewWidth = 20;[lab setTextColor:[UIColor blackColor]];titleLab = lab;[self.contentView addSubview:lab];}

第五步：在獲取到數據后，停止動畫，如下:

//停止動畫,并刷新數據 _mainTV.animatedStyle = TABTableViewAnimationEnd; [_mainTV reloadData];_headView.animatedStyle = TABViewAnimationEnd; [_headView initWithData:headGame];

注意點（重要）：

對于UITableView組件，在加載動畫的時候，即未獲得數據時，不要設置對應的數值

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {static NSString *str = @"TestTableViewCell";TestTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:str];if (!cell) {cell = [[TestTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:str];cell.selectionStyle = UITableViewCellSelectionStyleNone;}//在加載動畫的時候，即未獲得數據時，不要走加載控件數據的方法if (_mainTV.animatedStyle != TABTableViewAnimationStart) {[cell initWithData:dataArray[indexPath.row]];}return cell; }

對于UICollectionView組件：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {static NSString *CellIdentifier = @"TestCollectionViewCell";TestCollectionViewCell *cell = (TestCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];// 需要加上！！！[cell setNeedsLayout];// 在加載動畫的時候，即未獲得數據時，不要走加載控件數據的方法if (_collectionView.animatedStyle != TABCollectionViewAnimationStart) {[cell initWithData:dataArray[indexPath.row]];}return cell; }

特別注意UIView和UICollectionView用的是同一枚舉

再啰嗦一下：

本文只是簡單的引導作用，你可以用本框架訂制更精美的效果，具體例子github上代碼都有哦～

遇到問題先去demo上看看有沒有使用示例，實在不行聯系我～

最后：

• 歡迎在下方討論，同時，如果覺得對你有所幫助的話，能在github上star一下就更好了～
• 如有問題，可以聯系我， wx:awh199833
• 問題交流群:304543771
• github地址：https://github.com/tigerAndBu...

總結

以上是生活随笔為你收集整理的ios 原生骨架动画库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。