![2477988c576d6c3be61e855a5fdbdac9.png](https://i-blog.csdnimg.cn/blog_migrate/fa74d670df539d1852d1d7bcd78961d0.jpeg)
骨架屏是什么?
找到这里的同志,或多或少都对骨架屏有所了解,请容许我先啰嗦一句。骨架屏(Skeleton Screen)是一种优化用户弱网体验的方案,可以有效缓解用户等待的焦躁情绪。
TABAnimated是什么?
TABAnimated是提供给iOS开发者自动生成骨架屏的一种解决方案。开发者可以将已经开发好的视图,通过TABAnimated配置一些全局/局部的参数,自动生成与其长相一致的骨架屏。 当然,TABAnimated会协助你管理骨架屏的生命周期。
目录
- 集成优势
- 效果展示
- 演示过程
- 集成步骤
- 问题检索
- 最后强调
集成优势
通过TABAnimated集成的骨架屏有什么优势?
- 是一种自动化方案,集成速度很快
- 零耦合,易于将其动画逻辑封装到基础库,且移除方便
- 配有缓存功能,压测切换控制器不卡顿
- 适用场景广,可以适用开发中99%的视图
- 自由度非常高,可以完全地自定制
效果展示
![fbeec9861b1aaf124cad97a6ca137fc9.gif](https://i-blog.csdnimg.cn/blog_migrate/f44c07f6d4f6a342f77c75cf4c797b4a.gif)
![7f8a61230fc7be96ca6c8e7d345c90fa.gif](https://i-blog.csdnimg.cn/blog_migrate/55e99007ea1c9569c0887fb0d4e4fcfe.gif)
![2cc57b976bc775edfd0d03114062e2c6.gif](https://i-blog.csdnimg.cn/blog_migrate/2d7972848bc343369dbb79ad3c0db59e.gif)
![913d95430ef5840e36038d750373b905.gif](https://i-blog.csdnimg.cn/blog_migrate/b08acb9ae1ce37a84a9dc9033ba73469.gif)
![b7aeaf24901db3e46aeb0d10366da177.gif](https://i-blog.csdnimg.cn/blog_migrate/68730298f8d3db22d562fb2fb7ce6265.gif)
![ee96f51c5c7f70759d012d44d1c4888e.gif](https://i-blog.csdnimg.cn/blog_migrate/9adb657382dd6a96be4814e6f6a79b22.gif)
演示过程
下面通过一个小例子,更深入地了解一下TABAnimated。
1. 小明和小张有一个下图这样的视图,需要集成骨架屏
![76f31ee752139ad76a6ae5ba09503969.png](https://i-blog.csdnimg.cn/blog_migrate/b642ce7e571ed11deaf1c0f42c4e2411.jpeg)
2. 下面是通过TABAnimated自动化生成的效果
![1291aaca30c6cfad47184bb31432a6cd.png](https://i-blog.csdnimg.cn/blog_migrate/7550278f6f50179810a50c4788265f24.jpeg)
3. 小明做这个需求说,这个效果我很满意,那么小明的工作到此就结束了。但是小张说,我感觉长度,高度,虽然和原视图很像,但是作为一种动画效果我不太满意,不够精致。于是,他通过(预处理回调+链式语法),很快地做了如下调整。
![fa5f81f60371d7b3678624b3586dab9c.png](https://i-blog.csdnimg.cn/blog_migrate/f621fd6f55ada2953bdfc093c4aeed0b.jpeg)
当然啦,每个人有不同的审美,每个产品有不同的需求,这些就全交由你来把握啦~
集成步骤
一、导入到工程中
- 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,在框架中都有注释
- 有针对这个控制视图的局部属性,在框架中都有注释
四、控制骨架屏开关
- 开启动画
[self.collectionView tab_startAnimation];
- 关闭动画
[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);
![517facfd481f013bfa3813141561ee93.png](https://i-blog.csdnimg.cn/blog_migrate/8e6c90d4dd229a64d2efebb540ad456d.jpeg)
表格类型视图集成必看(UITableView/UICollectionView)
(1) 在你集成表格视图之前,一定要理清你自己的视图结构:
分为以下三种
- 以section为单元,section和cell样式一一对应
- 视图只有1个section, 但是对应多个cell
- 动态section:你的section数量是网络获取的
(2) 明白你自己的需求:
- 设置多个section/row,一起开启动画
- 设置多个section/row,部分开启动画
(3) 最后到框架内找到对应的初始化方法、启动动画方法即可!
问题检索
当然啦,在现实中,我们还有各式各样的视图,TABAnimated经历了很多产品的考验,统统都可以应对。 但是光凭上面的知识肯定是不够的,以下是更详细说明文档。
- 你最好要(必须)阅读的文档:
- 缓存策略和线程处理
- 你最可能用到的文档:
- 预处理回调动画元素下标问题
- 问题答疑文档
- 全局:局部属性、链式语法api
- 你可能用到的辅助工具、技术和其他文档
- 实时预览工具
- 豆瓣动画详解
- 不再hook setDelegate和setDataSource
如果你仍无法解决问题,可以尽快联系我,我相信TABAnimated是可以解决99%的需求的
最后强调:
- 有问题要先看demo和文档哈,基本都有~
- demo也只是引导的作用,你可以自己设置出更精美的效果
- 如有使用问题、优化建议、好的想法等,可以关注公众号:tigerAndBull技术分享,扫码加群快速解决
- github地址:https://github.com/tigerAndBull/TABAnimated