Awesome Open Source
Awesome Open Source

骨架屏是什么?

骨架屏(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.2'
  • 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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Objective C (110,693
Ios (19,320
Animation (5,127
Skeleton (801
Pull Requests (607
Loading (471
Uitableview (339
Uicollectionview (326
Placeholder (270
Loading Animations (177
Pull To Refresh (152
Ios Animation (138
Related Projects