/TABAnimated

A skeleton screen framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架，包含快速植入，低耦合，兼容复杂视图等特点，提供国内主流骨架屏动画的加载方案，同时支持上拉加载更多、自定制动画。)

Primary LanguageObjective-CMIT LicenseMIT

骨架屏是什么？

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

TABAnimated是什么？

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

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

目录

集成优势

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

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

效果展示

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

暗黑模式：

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

实时预览：

实时预览.gif

演示过程

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

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

需求.png

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

自动化生成.png

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

调整后效果.png

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

集成步骤

一、导入到工程中

  • CocoaPods
pod 'TABAnimated', '2.6.0'
  • 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];

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

OC

使用变量名修改

_tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
    manager.animationN(@"titleImageView").down(3).radius(12);
    manager.animationN(@"nameLabel").height(12).width(110);
    manager.animationN(@"timeButton").down(-5).height(12);
};

使用index修改

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

Swift

tableView.tabAnimated?.adjustBlock = { manager in
   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)和 manager.animationN(@"x")

答：在appDelegate设置TABAnimated的openAnimationTag属性为YES，框架就会自动为你指示，究竟x是几。 其实是视图addSubView尾递归排序

[TABAnimated sharedAnimated].openAnimationTag = YES;

animationN(@"x") x是变量名，不支持局部变量名

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技术分享，加群快速解决

应用接入

wecom-temp-4c0b27e6372bb356a05c92b838598457_副本

交流群

交流群

License

All source code is licensed under the License