TABAnimatediOS 骨架屏框架

联合创作 · 2023-09-26

TABAnimated 是提供给 iOS 开发者自动生成骨架屏的一种解决方案。它是一个由 iOS 原生组件映射出骨架屏的框架,包含快速植入,低耦合,兼容复杂视图等特点,提供国内主流骨架屏动画的加载方案,同时支持上拉加载更多、自定制动画。

开发者可以将已经开发好的视图,通过配置一些全局/局部的参数,自动生成与其长相一致的骨架屏。也就是说开发者不需要额外开发成本,就可以获得和需求一致的骨架屏。当然,TABAnimated 会管理你的骨架屏生命周期。

骨架屏是什么?

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

集成优势

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

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

集成步骤

一、导入到工程中

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

支持实时预览

浏览 7
点赞
评论
收藏
分享

手机扫一扫分享

编辑
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑
举报