TABAnimated 2.6.6

TABAnimated 2.6.6

×

由 tigerAndBull 维护。

TABAnimated 2.6.6

  • 由
  • tigerAndBull

骨架屏是什么？

骨架屏（Skeleton Screen）是一种优化用户弱网体验的方案。在弱网情况下，客户端获取到服务器数据的时间会比较长，此时用户会比较烦躁。该方案是指在空白页面提供与原视图结构一致的灰色区块。使得用户在未获得数据前，提前看到视图的轮廓，以缓解用户等待时的烦躁情绪。

TABAnimated是什么？

TABAnimated 是提供给 iOS 开发者自动生成骨架屏的一种解决方案。开发者可以将已经开发好的视图，通过配置一些全局/局部的参数，自动生成与其长相一致的骨架屏。也就是说开发者不需要额外开发成本，就可以获得和需求一致的骨架屏。

当然，TABAnimated 也会管理你的骨架屏生命周期。

目录

集成优势

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

  • 是一种自动化方案，实现速度快
  • 零耦合，易于集成和移除
  • 配有缓存功能，压测切换控制器不掉帧
  • 针对iOS原生视图处理，适用场景广
  • 自由度高，可以完全自定制，包括动画及其序列化
  • 自动切换暗黑模式骨架屏
  • 支持上拉加载时显示骨架屏
  • 可以配合InjectionIII实时预览集成效果

效果展示

闪光动画 经典动画 下坠动画
闪光动画.gif 经典动画.gif 下坠动画.gif
呼吸动画 上拉加载 复杂场景
呼吸动画.gif 上拉加载.gif 复杂场景.gif

暗黑模式：

工具箱切换 设置页面切换
工具箱切换.gif setting设置切换.gif

实时预览：

实时预览.gif

演示过程

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

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

需求.png

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

自动化生成.png

3. 小明完成这个需求后表示他很满意，那么小明的任务就结束了。但是小张觉得，效果虽然长度和高度与原始视图相似，但作为动画效果，他不太满意，不够精致。于是，他通过预处理回调和链式语法快速进行了如下调整。

调整后效果.png

当然，每个人的审美不同，每个产品的需求也不同，这些就拿给你来把握吧～

集成步骤

一、导入到工程中

  • CocoaPods
pod 'TABAnimated', '2.5.1'
  • 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);

下标示意图.png

表格集成必看

(1) 在你集成表格视图之前，务必理清你的视图结构：

分为以下三种类型

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

(2) 明确你的需求：

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

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

问题检索

当然，在实际应用中，我们还有各种视图，TABAnimated经历了许多产品的考验，都能应对。但仅仅凭借上面的知识肯定是不够的，以下是更详细的说明文档。

  • 最佳阅读文档：
  • 可能会用到的文档：
  • 其他实现原理文档

最后强调

  • 有问题一定要先查阅issues和documents
  • demo主要是起引导作用，提供不同结构视图的集成方案，开发者可以自己定制更精美的效果
  • 如有使用问题、优化建议、好想法等，可以关注公众号：tigerAndBull技术分享，加群快速解决问题

License

所有源代码均按照License授权