原生骨架屏库，合并模式版本，加入链式语法。

时间 2019-12-07

原文原文链接

以前有发布过文章，可是以前版本的使用方式都不够方便，快速，提出的两种模式解耦显得多余，此次从新调整，但愿你能喜欢。ios

关于 TABAnimated

TABAnimated的起源版本是模仿简书网页的骨架屏动态效果。在v1.9探索过模版模式，可是重复的工做量并不利于快速构建，并且两种模式的存在不合理，因此在v2.1删除了这种设定，可是模版模式的出现到删除，并非没有收获，相反带来了更合理的实现方案，更便捷的构建方式。git

实现原理

TABAnimated 须要一个控制视图，进行开关动画。该控制视图下的全部subViews都将加入动画队列。github

TABAnimated经过控制视图的subViews的位置及相关信息建立TABCompentLayer。普通控制视图，有一个TABLayer 表格视图，每个cell都有一个TABLayer TABLayer负责管理并显示全部的TABCompentLayer。数组

当使用约束进行布局时，约束不足且没有数据时，导致subViews的位置信息不能体现出来，TABAnimated会进行数据预填充。bash

优势

集成迅速
零耦合，易于将其动画逻辑封装到基础库
高性能，极少的内存损耗
链式语法，方便快捷，可读性高
彻底自定制，适应99.99%的视图

演变过程

看不清楚能够放大一下框架

简单说明一下：第一张图：原有表格组件, 有数据时的展现状况第二张图：是在该表格组件开启动画后，映射出的动画组，相信你能够看出来，效果并非很美观。第三张图：针对这个不美观的动画组，经过回调，进行预处理，下文进行说明布局

效果图

动态效果	卡片投影	呼吸灯

闪光灯	分段视图	嵌套表格

安装

使用 CocoaPods

pod 'TABAnimated'
复制代码

手动导入

将TABAnimated文件夹拖入工程性能

使用步骤

您只须要四步优化

在 didFinishLaunchingWithOptions 中初始化 TABAimated 还有其余的全局属性，下文用表格呈现。

// init `TABAnimated`, and set the properties you need.
[[TABAnimated sharedAnimated] initWithOnlySkeleton];
// open log
[TABAnimated sharedAnimated].openLog = YES;
复制代码

控制视图初始化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);
};
复制代码

开启动画

[self.collectionView tab_startAnimation];  
复制代码

关闭动画

[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

问：哪一个动画个体对应的是哪一个组件？

答：

若是你使用纯代码构建，那么你添加的组件顺序对应的动画数组的下标, 好比第一个添加到cell上的，那么它对应的动画组件就是：view.animation(0) 依次类推，只要打开你的cell文件，看一下层级进行调整就行了。

可是，若是你用xib建立，很遗憾地告诉你，顺序是关联xib文件的顺序。 demo中的xib作了一个错误示范，有坑慎入。目前没有找到其余很好的方式，也但愿收集你们的建议。

多行文本

上文有提到，这里再强调一下，可使用.line(x)设置行数 .space(x)设置间距每个动画组件均可以设置这两个属性，达到同一个效果。
指定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);
};
复制代码

多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);
      }
  };
复制代码

对于嵌套表格组件，须要在被嵌套在内的表格组件的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

强调：

demo也只是简单的引导做用，你能够订制更精美的效果，高效解决99.99%视图骨架
以上的说明，demo上都有详细介绍和案例，遇到问题先去demo上看看有没有使用示例

最后：

感谢相遇，感谢使用，若是您以为不错能够在github上点个star

若有使用问题，优化建议等，加入交流群更快解决:304543771

github地址：github.com/tigerAndBul…