内容简介:在v1.9探索过模版模式,但是重复的工作量并不利于快速构建,
最新版 2.0.5,release版本
目录
关于 TABAnimated
TABAnimated
的起源版本是模仿 简书 网页的骨架屏动态效果。
在v1.9探索过模版模式,但是重复的工作量并不利于快速构建,
而且两种模式的存在不合理,所以在v2.1删除了这种设定,但是模版模式的出现到删除,并不是没有收获,相反带来了更合理的实现方案,更便捷的构建方式。
实现原理
TABAnimated
需要一个控制视图,进行开关动画。该控制视图下的所有subViews都将加入动画队列。
TABAnimated
通过控制视图的subViews的位置及相关信息创建 TABCompentLayer
。
TABLayer
表格视图,每一个cell都有一个
TABLayer
TABLayer
负责管理并显示所有的 TABCompentLayer
。
当使用约束进行布局时,约束不足且没有数据时,致使subViews的位置信息不能体现出来,TABAnimated会进行数据预填充。
优点
- 集成迅速
- 零耦合,易于将其动画逻辑封装到基础库
- 高性能,极少的内存损耗
- 链式语法,方便快捷,可读性高
- 完全自定制,适应99.99%的视图
演变过程
看不清楚可以放大一下
简单说明一下:
第一张图:原有表格组件, 有数据时的展示情况
第二张图:是在该表格组件开启动画后,映射出的动画组,相信你可以看出来,效果并不是很美观。
第三张图:针对这个不美观的动画组,通过回调,进行预处理,下文进行说明
效果图
| 动态效果 | 卡片投影 | 呼吸灯 |
| ------ | ------ | ------ |
| ||
|
| 闪光灯 | 分段视图 | 嵌套表格 |
| ------ | ------ | ------ |
| ||
|
安装
使用 CocoaPods
pod 'TABAnimated'
手动导入
将TABAnimated文件夹拖入工程
使用步骤
您只需要四步
- 在
didFinishLaunchingWithOptions
中初始化TABAimated
还有其他的全局属性,下文用表格呈现。
**老用户注意:
原TABViewAnimated已经改名为TABAnimated**
如今的TABViewAnimated已经成为UIView的骨架对象
// init `TABAnimated`, and set the properties you need. [[TABAnimated sharedAnimated] initWithOnlySkeleton]; // open log [TABAnimated sharedAnimated].openLog = YES;
- 控制视图初始化tabAnimated
普通view:
self.mainView.tabAnimated = TABViewAnimated.new; self.mainView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) { view.animation(1).width(200); view.animation(2).width(220); view.animation(3).width(180); };
表格组件:
_collectionView.tabAnimated = [TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class] cellSize:[NewsCollectionViewCell cellSize]]; _collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) { view.animation(1).reducedWidth(20).down(2); view.animation(2).reducedWidth(-10).up(1); view.animation(3).down(5).line(4); view.animations(4,3).radius(3).down(5); };
- 开启动画
[self.collectionView tab_startAnimation];
- 关闭动画
[self.collectionView tab_endAnimation];
UIView 对应 TABViewAnimated
UITableView 对应 TABTableAnimated
UICollectionView 对应 TABCollectionAnimated
还配有其他的初始化方式,支持多section,指定section。
一般情况下,注册的cell用原来的cell进行映射就可以了。
特殊应用场景:
举个例子,新浪微博帖子页面,有很多很多种类型,
这样复杂的页面,上升到动画层面肯定是设计一个统一的动画,
这个时候,你可以重新写一个cell,然后注册到这个表格上,通过本框架映射出你想要的视觉效果,这个也是模版功能演变过来的。
具体其他的详细信息,会继续添加其他文档,或者在github上demo中查看。
扩展回调
扩展回调将动画组给予开发者,开发者可以对其进行调整。
因为是调整,所以加入了链式语法,让开发者快速且方便地调整。
_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) { view.animation(1).reducedWidth(20).down(2); view.animation(2).reducedWidth(-10).up(1); view.animation(3).down(5).line(4); view.animations(4,3).radius(3).down(5); };
参数说明(框架中也有详细注释)
TABCompentLayer
view.animations(x,x): 该view指定范围的动画个体数组, 用于统一调整
up(x):向上移动多少
down(x):向下移动多少
left(x):向左移动多少
right(x):向右移动多少
height(x): 修改高度
width(x): 修改宽度
reducedWidth(x): 宽度相比之前,减少多少
reducedHeight(x): 高度相比之前,减少多少
radius(x): 圆角
line(x): 行数
space(x): 间距
这两个参数,如果是多行文本,根据 numberOfLines
数量默认生效
普通的动画个体也可以设置这个两个属性,达到同样的效果
remove(): 移出动画组
toLongAnimation(): 赋予动态变长动画
toShortAnimation(): 赋予动态变短动画
特别提醒:
TABAnimated.h TABViewAnimated.h
优先级:
动画个体参数配置 > 控制视图动画参数配置 > 全局动画参数配置
Tips
- 问:哪个动画个体对应的是哪个组件?
答:
如果你使用纯代码构建,那么你添加的组件顺序对应的动画数组的下标,
比如第一个添加到cell上的,那么它对应的动画组件就是:view.animation(0)
依次类推,只要打开你的cell文件,看一下层级进行调整就好了。
但是,如果你用xib创建,很遗憾地告诉你,顺序是关联xib文件的顺序。
demo中的xib做了一个错误示范,有坑慎入。
目前没有找到其他很好的方式,也希望收集大家的建议。
- 多行文本
上文有提到,这里再强调一下,
可以使用.line(x)设置行数 .space(x)设置间距
每一个动画组件都可以设置这两个属性,达到同一个效果。
- 指定section加载动画的初始化方法
举个例子:
比如 animatedSectionArray = @[@(3),@(4)];
意思是 cellHeightArray,animatedCountArray,cellClassArray数组中的第一个元素,是分区为3时的动画数据。
// 部分section有动画 _tableView.tabAnimated = [TABTableAnimated animatedWithCellClassArray:@[[TestTableViewCell class]] cellHeightArray:@[@(100)] animatedCountArray:@[@(1)] animatedSectionArray:@[@(1)]]; _tableView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) { view.animation(1).down(3).height(12).toShortAnimation(); view.animation(2).height(12).width(110).toLongAnimation(); view.animation(3).down(-5).height(12); };
- 多section时扩展回调使用
_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) { if ([view isKindOfClass:[CourseCollectionViewCell class]]) { } if ([view isKindOfClass:[DailyCollectionViewCell class]]) { view.animations(1,3).height(14); view.animation(2).down(6); view.animation(1).up(1); view.animation(3).up(6); } };
- 对于嵌套表格组件,需要在被嵌套在内的表格组件的
isNest
属性设为YES
,详情请看demo。
_collectionView.tabAnimated = [[TABAnimatedObject alloc] init]; _collectionView.tabAnimated.isNest = YES; _collectionView.tabAnimated.animatedCount = 3;
属性相关
| 初始化方法| 名称 |
| ------ | ------ |
| initWithOnlySkeleton | 骨架屏 |
| initWithBinAnimation | 呼吸灯动画 |
| initWithShimmerAnimated | 闪光灯动画 |
如果控制视图的 superAnimationType
做了设置,那么将以 superAnimationType
声明的动画类型加载
全局动画属性:
使用方法
[TABAnimated shareAnimated].xxx = xxx;
属性名称 | 适用动画 | 含义 | 默认值 |
---|---|---|---|
animatedColor | 通用 | 动画颜色 | 0xEEEEEE |
animatedBackgroundColor | 通用 | 动画背景颜色 | UIColor.white |
animatedDuration | 动态动画 | 来回移动时长 | 1.0 |
longToValue | 动态动画 | 伸缩比例 | 1.9 |
shortToValue | 动态动画 | 伸缩比例 | 0.6 |
animatedDurationShimmer | 闪光灯 | 移动时长 | 1.5 |
animatedHeightCoefficient | 通用 | 高度系数 | 0.75 |
useGlobalCornerRadius | 通用 | 开启全局圆角 | NO |
animatedCornerRadius | 通用 | 全局圆角 | 0. |
useGlobalAnimatedHeight | 不适用UIImageView | 使用全局动画高度 | NO |
animatedHeight | 不适用UIImageView | 全局动画高度 | 12. |
openLog | 通用 | 开启日志 | NO |
控制视图下所有动画属性配置:
使用方法
_tableView.tabAnimated.xxx = xxx;
属性名称 | 适用范围 | 含义 | 默认值 |
---|---|---|---|
superAnimationType | 通用 | 该控制视图动画类型 | 默认使用全局属性 |
animatedCount | 表格组件 | 动画数量 | 填满表格可视区域 |
animatedColor | 通用 | 动画内容颜色 | UIColor.white |
animatedBackgroundColor | 通用 | 动画背景颜色 | 0xEEEEEE |
cancelGlobalCornerRadius | 通用 | 取消使用全局圆角 | NO |
animatedCornerRadius | 通用 | 该控制视图下动画圆角 | 0. |
animatedHeight | 通用 | 该控制视图下动画高度 | 0. |
isAnimating | 通用 | 是否在动画中 | \ |
isNest | 通用 | 是否是被嵌套的表格 | NO |
canLoadAgain | 通用 | 是否可以重复启动动画 | NO |
强调:
- demo也只是简单的引导作用,
你可以订制更精美的效果,高效解决99.99%视图骨架
- 以上的说明,demo上都有详细介绍和案例,
遇到问题先去 demo 上看看有没有使用示例
最后:
- 感谢相遇,感谢使用,如果您觉得不错可以在github上点个star
- 如有使用问题,优化建议等,加入交流群更快解决:304543771
- github地址: https://github.com/tigerAndBu...
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 原生骨架库模版功能上线,零耦合。
- 原生骨架屏库,合并模式版本,加入链式语法。
- ios - 原生骨架屏之仿豆瓣动画
- ios - 原生骨架屏,网络加载过渡动画的封装
- Android 骨架屏效果,了解一下
- vue 移动端注入骨架屏
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。