原生骨架屏

骨架屏是什么？

找到这里的同志，或多或少都对骨架屏有所了解，请允许我先啰嗦一句。骨架屏(Skeleton Screen)是一种优化用户弱网体验的方案，能够有效缓解用户等待的焦躁情绪。

TABAnimated是什么？

TABAnimated是提供给iOS开发者自动生成骨架屏的一种解决方案。开发者能够将已经开发好的视图，经过TABAnimated配置一些全局/局部的参数，自动生成与其长相一致的骨架屏。 固然，TABAnimated会协助你管理骨架屏的生命周期。

目录

• 集成优点
• 效果展现
• 演示过程
• 集成步骤
• 问题检索
• 最后强调

集成优点

经过TABAnimated集成的骨架屏有什么优点？

• 是一种自动化方案，集成速度很快
• 零耦合，易于将其动画逻辑封装到基础库，且移除方便
• 配有缓存功能，压测切换控制器不卡顿
• 适用场景广，能够适用开发中99%的视图
• 自由度很是高，能够彻底地自定制

效果展现

动态效果	卡片投影	呼吸灯

闪光灯	分段视图	豆瓣效果

演示过程

下面经过一个小例子，更深刻地了解一下TABAnimated。

1. 小明和小张有一个下图这样的视图，须要集成骨架屏

2. 下面是经过TABAnimated自动化生成的效果

3. 小明作这个需求说，这个效果我很满意，那么小明的工做到此就结束了。可是小张说，我感受长度，高度，虽然和原视图很像，可是做为一种动画效果我不太满意，不够精致。因而，他经过（预处理回调+链式语法），很快地作了以下调整。

固然啦，每一个人有不一样的审美，每一个产品有不一样的需求，这些就全交由你来把握啦～

集成步骤

1、导入到工程中

• CocoaPods

pod 'TABAnimated'
复制代码

• Carthage

github "tigerAndBull/TABAnimated"
复制代码

• 将TABAnimated文件夹拖入工程

注意: 在github上下载的演示demo，为了很好的模拟真实的应用场景，使用了一些你们都熟悉的第三方，可是TABAnimated自身并不依赖他们。

2、全局参数初始化

在 didFinishLaunchingWithOptions 中初始化 TABAimated

[[TABAnimated sharedAnimated] initWithOnlySkeleton];
[TABAnimated sharedAnimated].openLog = YES;
复制代码

注意：还有其余的动画类型、全局属性，在框架中都有注释。

3、控制视图初始化

控制视图：若是是列表视图，那么就是UITableView/UICollectionView，有文档具体讲解。

NewsCollectionViewCell就是你列表中用到的cell，固然你要绑定其余cell，也是彻底能够的！

_collectionView.tabAnimated = 
[TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class] 
cellSize:[NewsCollectionViewCell cellSize]];
复制代码

注意：

• 有其余初始化方法，好比常见的多种cell，在框架中都有注释
• 有针对这个控制视图的局部属性，在框架中都有注释

4、控制骨架屏开关

1. 开启动画

[self.collectionView tab_startAnimation];  
复制代码

2. 关闭动画

[self.collectionView tab_endAnimation];
复制代码

5、刚刚说到的，预处理回调+链式语法怎么用？

_tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
    manager.animation(1).down(3).radius(12);
    manager.animation(2).height(12).width(110);
    manager.animation(3).down(-5).height(12);
};
复制代码

1. 有的人看到上面，可能一会儿就被吓到了，集成须要这么复杂吗？

答：需不须要异步调整，须要调整到什么程度，与你自身约束、产品需求，都有关系。因此并不能自动生成让任何产品、任何人当即都彻底满意的效果。 你大可放心，推出这个功能反而是协助开发者更快速调整本身想要的结果。**

2. manager.animation(x)，x是多少？

答：在appDelegate设置TABAnimated的openAnimationTag属性为YES，框架就会自动为你指示，究竟x是几

[TABAnimated sharedAnimated].openAnimationTag = YES;
复制代码

3. 经过几个示例，具体了解（预处理回调+链式语法）

• 假如第0个元素的高度和宽度不合适

manager.animation(0).height(12).width(110);
复制代码

• 假如第1个元素须要使用占位图

manager.animation(1).placeholder(@"占位图名称.png");
复制代码

• 假如第1，2，3个元素宽度都为50

manager.animations(1,3).width(50);
复制代码

• 假如第1，5，7个元素须要下移5px

manager.animationWithIndexs(1,5,7).down(5);
复制代码

问题检索

固然啦，在现实中，咱们还有各式各样的视图，TABAnimated经历了不少产品的考验，通通均可以应对。 可是光凭上面的知识确定是不够的，如下是更详细说明文档。

• 你最好要（必须）阅读的文档：

• 缓存策略和线程处理

• 你最可能用到的文档：

• 预处理回调动画元素下标问题
• 问题答疑文档
• 全局:局部属性、链式语法api

• 你可能用到的辅助工具、技术和其余文档

• 实时预览工具
• 豆瓣动画详解
• 再也不hook setDelegate和setDataSource

若是你仍没法解决问题，能够尽快联系我，我相信TABAnimated是能够解决99%的需求的

最后强调：

• 有问题要先看demo和文档哈，基本都有～
• demo也只是引导的做用，你能够本身设置出更精美的效果
• 若有使用问题，优化建议等，能够直接提issue，能够加交流群反馈: 304543771
• github地址：github.com/tigerAndBul…