iOS - 骨架屏自动生成方案

妖狐艹你老母 2023-07-23 10:57 29阅读 0赞

![format_png][]

## 骨架屏是什么？ ##

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

## TABAnimated是什么？ ##

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

## 目录 ##

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

## 集成优势 ##

通过TABAnimated集成的骨架屏有什么优势？

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

## 效果展示 ##

<table> 
 <thead> 
  <tr> 
   <th>闪光灯</th> 
   <th>分段视图</th> 
   <th>豆瓣效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjMyMDAzLTkzYWIyY2Y2OTUwNDk4YWIuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjg4L2Zvcm1hdC93ZWJw"></p> <p>闪光灯改版.gif</p> </td> 
   <td> <p><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjMyMDAzLTRkYTIwNjJiZTY5MWNmMGIuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjkwL2Zvcm1hdC93ZWJw"></p> <p>分段视图.gif</p> </td> 
   <td> <p><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjMyMDAzLTNlZDlkNmNjMzE3ODkxYTMuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjk1L2Zvcm1hdC93ZWJw"></p> <p>豆瓣.gif</p> </td> 
  </tr> 
 </tbody> 
</table>

## 演示过程 ##

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

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

![format_png 1][]

需求.png

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

![format_png 2][]

自动化生成.png

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

![format_png 3][]

调整后效果.png

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

## 集成步骤 ##

### 一、导入到工程中 ###

*  CocoaPods

pod 'TABAnimated'

*  Carthage

github "tigerAndBull/TABAnimated"

*  将TABAnimated文件夹拖入工程

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

### 二、全局参数初始化 ###

在 `didFinishLaunchingWithOptions` 中初始化 `TABAimated`

[[TABAnimated sharedAnimated] initWithOnlySkeleton];
    [TABAnimated sharedAnimated].openLog = YES;

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

### 三、控制视图初始化 ###

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

`NewsCollectionViewCell`就是你列表中用到的cell，当然你要绑定其他cell，也是完全可以的！

_collectionView.tabAnimated = 
    [TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class] 
    cellSize:[NewsCollectionViewCell cellSize]];

**注意：**

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

### 四、控制骨架屏开关 ###

1.  开启动画

[self.collectionView tab_startAnimation];

1.  关闭动画

[self.collectionView tab_endAnimation];

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

_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);

![format_png 4][]

下标示意图.png

表格类型视图集成必看（UITableView/UICollectionView）

(1) 在你集成表格视图之前，一定要理清你自己的视图结构：

分为以下三种

*  以section为单元，section和cell样式一一对应
 *  视图只有1个section, 但是对应多个cell
 *  动态section：你的section数量是网络获取的

(2) 明白你自己的需求：

*  设置多个section/row，一起开启动画
 *  设置多个section/row，部分开启动画

(3) 最后到框架内找到对应的初始化方法、启动动画方法即可！

## 问题检索 ##

**当然啦，在现实中，我们还有各式各样的视图，TABAnimated经历了很多产品的考验，统统都可以应对。  
但是光凭上面的知识肯定是不够的，以下是更详细说明文档。**

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

>  *  [缓存策略和线程处理][Link 1]

*  你最可能用到的文档：

>  *  [预处理回调动画元素下标问题][Link 2]
>  *  [问题答疑文档][Link 3]
>  *  [全局:局部属性、链式语法api][api]

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

>  *  [实时预览工具][Link 4]
>  *  [豆瓣动画详解][Link 5]
>  *  [不再hook setDelegate和setDataSource][hook setDelegate_setDataSource]

**如果你仍无法解决问题，可以尽快联系我，我相信TABAnimated是可以解决99%的需求的**

## 最后强调： ##

*  有问题要先看[demo][]和文档哈，基本都有～
 *  demo也只是引导的作用，你可以自己设置出更精美的效果
 *  如有使用问题，优化建议等，可以直接提issue，可以加交流群反馈: 304543771
 *  github地址：[https://github.com/tigerAndBull/TABAnimated][https_github.com_tigerAndBull_TABAnimated]

作者：tigerAndBull  
链接：https://www.jianshu.com/p/6a0ca4995dff  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[format_png]: /images/20230528/a476611467724d81b236276c061680c9.png
[format_png 1]: /images/20230528/889e2cb4c4d54bf79a4a02580098e420.png
[format_png 2]: /images/20230528/e9b2d5b3f312487bbd6b24511519aac7.png
[format_png 3]: /images/20230528/bf31536476cf4e028ca3e6f67ad764d9.png
[format_png 4]: /images/20230528/4420419d9a274d3898c4af3f53c4de7f.png
[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FtigerAndBull%2FTABAnimated%2Fblob%2Fmaster%2FDocuments%2F%25E7%25BC%2593%25E5%25AD%2598%25E7%25AD%2596%25E7%2595%25A5%25E5%2592%258C%25E7%25BA%25BF%25E7%25A8%258B%25E5%25A4%2584%25E7%2590%2586.md
[Link 2]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FtigerAndBull%2FTABAnimated%2Fblob%2Fmaster%2FDocuments%2F%25E5%258A%25A8%25E7%2594%25BB%25E5%2585%2583%25E7%25B4%25A0%25E4%25B8%258B%25E6%25A0%2587%25E9%2597%25AE%25E9%25A2%2598.md
[Link 3]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FtigerAndBull%2FTABAnimated%2Fblob%2Fmaster%2FDocuments%2F%25E9%2597%25AE%25E9%25A2%2598%25E7%25AD%2594%25E7%2596%2591%25E6%2596%2587%25E6%25A1%25A3.md
[api]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FtigerAndBull%2FTABAnimated%2Fblob%2Fmaster%2FDocuments%2F%25E5%2585%25A8%25E5%25B1%2580%3A%25E5%25B1%2580%25E9%2583%25A8%25E5%25B1%259E%25E6%2580%25A7%25E3%2580%2581%25E9%2593%25BE%25E5%25BC%258F%25E8%25AF%25AD%25E6%25B3%2595api.md
[Link 4]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FtigerAndBull%2FTABAnimated%2Fblob%2Fmaster%2FDocuments%2F%25E5%25AE%259E%25E6%2597%25B6%25E9%25A2%2584%25E8%25A7%2588%25E5%25B7%25A5%25E5%2585%25B7.md
[Link 5]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FtigerAndBull%2FTABAnimated%2Fblob%2Fmaster%2FDocuments%2F%25E8%25B1%2586%25E7%2593%25A3%25E5%258A%25A8%25E7%2594%25BB%25E8%25AF%25A6%25E8%25A7%25A3.md
[hook setDelegate_setDataSource]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FtigerAndBull%2FTABAnimated%2Fblob%2Fmaster%2FDocuments%2F%25E4%25B8%258D%25E5%2586%258Dhook%2520setDelegate%25E5%2592%258CsetDataSource.md
[demo]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FtigerAndBull%2FLoadAnimatedDemo-ios
[https_github.com_tigerAndBull_TABAnimated]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FtigerAndBull%2FTABAnimated