TABAnimatediOS 骨架屏框架

联合创作 · 2023-09-26 19:50

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];


支持实时预览


浏览 26
点赞
评论
收藏
分享

手机扫一扫分享

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

手机扫一扫分享

编辑 分享
举报