效果图
闪光灯模式
骨架屏模式
经典动画模式
闪光灯动画.gif
只有骨架屏.gif
经典动画.gif
本项目思维导图
思维导图.JPG
说明
本文将介绍如何将demo集成到你的项目中
均为个人思考，转载请注明出处，谢谢
简要说明
一般情况下，移动端在展示服务器端数据时需要经历
创建视图 - 请求数据 - 得到数据并展示 三个步骤
本框架在未获得到数据的这段空档期内，根据视图已有的位置信息，映射出一组相同的CALayer视图以及部分动画，在获取到数据后，开发者主动结束动画时一并移除掉。
使用流程
第一步：Install
CocoaPods
搜索：pod search TABAnimated
安装：pod 'TABAnimated', '~> x.x.x'
第二步：在AppDelegate的didFinishLaunchingWithOptions方法全局设置TABAnimated的相关属性
初始化目录图.png
//简单的示例[[TABViewAnimatedsharedAnimated]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枚举typedefNS_ENUM(NSInteger,TABViewAnimationStyle){
TABViewAnimationDefault=0,//默认,没有动画
TABViewAnimationStart,//开始动画
TABViewAnimationRuning,//动画中
TABViewAnimationEnd,//结束动画
TABCollectionViewAnimationStart,//CollectionView开始动画
TABCollectionViewAnimationRunning,//CollectionView动画中
TABCollectionViewAnimationEnd//CollectionView结束动画};
//UITableView枚举typedefNS_ENUM(NSInteger,TABViewAnimationStyle){
TABViewAnimationDefault=0,//没有动画，默认
TABViewAnimationStart,//开始动画
TABViewAnimationEnd//结束动画};
//UITableView例子-(UITableView*)mainTV{if(!_mainTV){
_mainTV=[[UITableViewalloc]initWithFrame:CGRectMake(0,0,kScreenWidth,kScreenHeight)];
_mainTV.animatedStyle=TABTableViewAnimationStart;//开启动画
_mainTV.delegate=self;
_mainTV.dataSource=self;
_mainTV.rowHeight=100;
_mainTV.backgroundColor=[UIColorwhiteColor];
_mainTV.estimatedRowHeight=0;
_mainTV.estimatedSectionFooterHeight=0;
_mainTV.estimatedSectionHeaderHeight=0;
_mainTV.separatorStyle=UITableViewCellSeparatorStyleNone;
}return_mainTV;
}//UIView例子-(TestHeadView*)headView{if(!_headView){
_headView=[[TestHeadViewalloc]initWithFrame:CGRectMake(0,0,tab_kScreenWidth,90)];
_headView.animatedStyle=TABViewAnimationStart;//开启动画
}return_headView;
}
第四步，子视图需要的操作 (只有经典动画模式，包括自定义模式下的经典动画需要此操作)：
将需要动的组件的属性loadStyle，设置为需要的类型(不需要动的组件不用做额外的操作)
2.(尽量不要使用)属性tabViewWidth，tabViewHeight，其为动画开启时该组件的宽度,高度，有默认值
typedefenum{
TABViewLoadAnimationDefault=0,//默认没有动画
TABViewLoadAnimationShort,//动画先变短再变长
TABViewLoadAnimationLong//动画先变长再变短}TABViewLoadAnimationStyle;//view动画类型枚举
{UILabel*lab=[[UILabelalloc]init];
[labsetFont:tab_kFont(15)];
lab.loadStyle=TABViewLoadAnimationLong;
lab.tabViewWidth=100;
lab.tabViewWidth=20;
[labsetTextColor:[UIColorblackColor]];
titleLab=lab;
[self.contentViewaddSubview:lab];
}
第五步：在获取到数据后，停止动画，如下:
//停止动画,并刷新数据_mainTV.animatedStyle=TABTableViewAnimationEnd;
[_mainTVreloadData];
_headView.animatedStyle=TABViewAnimationEnd;
[_headViewinitWithData:headGame];
注意点(重要)：
对于UITableView组件，在加载动画的时候，即未获得数据时，不要设置对应的数值
-(UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath{
staticNSString*str=@"TestTableViewCell";
TestTableViewCell*cell=[tableViewdequeueReusableCellWithIdentifier:str];if(!cell){
cell=[[TestTableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:str];
cell.selectionStyle=UITableViewCellSelectionStyleNone;
}
//在加载动画的时候，即未获得数据时，不要走加载控件数据的方法
if(_mainTV.animatedStyle!=TABTableViewAnimationStart){
[cellinitWithData:dataArray[indexPath.row]];
}returncell;
}
对于UICollectionView组件：
-(UICollectionViewCell*)collectionView:(UICollectionView*)collectionViewcellForItemAtIndexPath:(NSIndexPath*)indexPath{
staticNSString*CellIdentifier=@"TestCollectionViewCell";
TestCollectionViewCell*cell=(TestCollectionViewCell*)
[collectionViewdequeueReusableCellWithReuseIdentifier:CellIdentifierforIndexPath:indexPath];
//需要加上！！！
[cellsetNeedsLayout];
//在加载动画的时候，即未获得数据时，不要走加载控件数据的方法
if(_collectionView.animatedStyle!=TABCollectionViewAnimationStart){
[cellinitWithData:dataArray[indexPath.row]];
}returncell;
}
特别注意UIView和UICollectionView用的是同一枚举
再啰嗦一下：
本文只是简单的引导作用，你可以用本框架订制更精美的效果，具体例子github上代码都有哦～
遇到问题先去demo上看看有没有使用示例，实在不行联系我～
最后：
欢迎在下方讨论，同时，如果觉得对你有所帮助的话，能在github上star一下就更好了～
如有问题，可以联系我，wx:awh199833
如果觉得《android 骨架屏刷新动画 ios - 原生骨架屏 网络加载过渡动画的封装》对你有帮助，请点赞、收藏，并留下你的观点哦！
