效果圖

閃光燈模式

骨架屏模式

經典動畫模式

閃光燈動畫.gif

只有骨架屏.gif

經典動畫.gif

本項目思維導圖

思維導圖.JPG

說明

本文將介紹如何將demo集成到你的項目中

均為個人思考，轉載請注明出處，謝謝

簡要說明

一般情況下，移動端在展示服務器端數據時需要經歷

創建視圖 - 請求數據 - 得到數據并展示 三個步驟

本框架在未獲得到數據的這段空檔期內，根據視圖已有的位置信息，映射出一組相同的CALayer視圖以及部分動畫，在獲取到數據后，開發者主動結束動畫時一并移除掉。

使用流程

第一步：Install

CocoaPods

搜索：pod search TABAnimated

安裝：pod 'TABAnimated', '~> x.x.x'

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

初始化目錄圖.png

//?簡單的示例[[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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的android 骨架屏刷新动画,ios - 原生骨架屏，网络加载过渡动画的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

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