ios 原生骨架动画库
本文目录
- 效果图
- 框架思维导图
- 使用教程
效果图
- 闪光灯模式
- 骨架屏模式
- 经典动画模式
本项目思维导图
交流群
为了方便进行交流和解决问题,可以加入TABAnimated交流群,保证只进行技术问题的讨论,群号:304543771
简要说明
一般情况下,移动端在展示服务器端数据时需要经历
创建视图 - 请求数据 - 得到数据并展示
三个步骤
本框架在未获得到数据的这段空档期内,根据视图已有的位置信息,映射出一组相同的CALayer视图以及部分动画,在获取到数据后,开发者主动结束动画时一并移除掉。
使用流程
第一步:Install
CocoaPods
搜索:pod search TABAnimated
安装:pod 'TABAnimated', '~> x.x.x'
第二步:在AppDelegate的didFinishLaunchingWithOptions
方法全局设置TABAnimated的相关属性
// 简单的示例
[[TABViewAnimated sharedAnimated]initWithOnlySkeleton];
初始化目录 | 名称 | 是否全局 | superAnimationType |
---|---|---|---|
Default Animation | 经典动画模式 | 是 | 该属性无效 |
Shimmer Animation | 闪光灯模式 | 是 | 该属性无效 |
OnlySkeleton | 骨架屏模式 | 是 | 该属性无效 |
Custom Animation | 自定义模式 | 否 | 该属性有效 |
说明:
- 全局:项目中所有视图的所有动画,都是你所指定的初始化方法的那一种
非全局:父视图通过设置`superAnimationType`,指定该父视图下的所有子视图的动画类型(默认为经典动画类型)
所以第四种初始化方式和superAnimationType
属性的意义:使得项目中可以用两种以上动画类型
- Shimmer和OnlySkeleton的动画,不需要为子视图指定动画类型,将默认设置为
TABAnimationTypeOnlySkeleton
,您可以使用demo查看效果(后面有提到)
选择设置其他TABAnimated的属性:
属性名称 | 适用模式 | 含义 | 默认值 |
---|---|---|---|
animatedColor | 所有模式 | 动画颜色 | 0xEEEEEE |
animatedDuration | 经典动画模式 | 伸展来回时长 | 0.4 |
longToValue | 经典动画模式 | 伸展变长时长度 | 1.6 |
shortToValue | 经典动画模式 | 伸展变短时长度 | 0.6 |
animatedDurationShimmer | 闪光灯模式 | 闪光灯移动时长 | 1.5 |
第三步,父视图需要的操作:在需要动画的view上,将属性animatedStyle
设置为TABTableViewAnimationStart
,不需要动画的view不用做额外的操作
// UIView和UICollectionView枚举
typedef NS_ENUM(NSInteger,TABViewAnimationStyle) {TABViewAnimationDefault = 0, // 默认,没有动画TABViewAnimationStart, // 开始动画TABViewAnimationRuning, // 动画中TABViewAnimationEnd, // 结束动画TABCollectionViewAnimationStart, // CollectionView 开始动画TABCollectionViewAnimationRunning, // CollectionView 动画中TABCollectionViewAnimationEnd // CollectionView 结束动画
};// UITableView枚举
typedef NS_ENUM(NSInteger,TABViewAnimationStyle) {TABViewAnimationDefault = 0, // 没有动画,默认TABViewAnimationStart, // 开始动画TABViewAnimationEnd // 结束动画
};
// UITableView例子
- (UITableView *)mainTV {if (!_mainTV) {_mainTV = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];_mainTV.animatedStyle = TABTableViewAnimationStart; // 开启动画_mainTV.delegate = self;_mainTV.dataSource = self;_mainTV.rowHeight = 100;_mainTV.backgroundColor = [UIColor whiteColor];_mainTV.estimatedRowHeight = 0;_mainTV.estimatedSectionFooterHeight = 0;_mainTV.estimatedSectionHeaderHeight = 0;_mainTV.separatorStyle = UITableViewCellSeparatorStyleNone;}return _mainTV;
}// UIView例子
- (TestHeadView *)headView {if (!_headView) {_headView = [[TestHeadView alloc]initWithFrame:CGRectMake(0, 0, tab_kScreenWidth, 90)];_headView.animatedStyle = TABViewAnimationStart; //开启动画}return _headView;
}
第四步,子视图需要的操作 (只有经典动画模式,包括自定义模式下的经典动画需要此操作):
- 将需要动的组件的属性
loadStyle
,设置为需要的类型(不需要动的组件不用做额外的操作)2.(尽量不要使用)属性
tabViewWidth
,tabViewHeight
,其为动画开启时该组件的宽度,高度,有默认值
typedef enum {TABViewLoadAnimationDefault = 0, //默认没有动画TABViewLoadAnimationShort, //动画先变短再变长TABViewLoadAnimationLong //动画先变长再变短
}TABViewLoadAnimationStyle; //view动画类型枚举
{UILabel *lab = [[UILabel alloc]init];[lab setFont:tab_kFont(15)];lab.loadStyle = TABViewLoadAnimationLong;lab.tabViewWidth = 100;lab.tabViewWidth = 20;[lab setTextColor:[UIColor blackColor]];titleLab = lab;[self.contentView addSubview:lab];}
第五步:在获取到数据后,停止动画,如下:
//停止动画,并刷新数据
_mainTV.animatedStyle = TABTableViewAnimationEnd;
[_mainTV reloadData];_headView.animatedStyle = TABViewAnimationEnd;
[_headView initWithData:headGame];
注意点(重要):
- 对于UITableView组件,在加载动画的时候,即未获得数据时,不要设置对应的数值
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {static NSString *str = @"TestTableViewCell";TestTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:str];if (!cell) {cell = [[TestTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:str];cell.selectionStyle = UITableViewCellSelectionStyleNone;}//在加载动画的时候,即未获得数据时,不要走加载控件数据的方法if (_mainTV.animatedStyle != TABTableViewAnimationStart) {[cell initWithData:dataArray[indexPath.row]];}return cell;
}
- 对于UICollectionView组件:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {static NSString *CellIdentifier = @"TestCollectionViewCell";TestCollectionViewCell *cell = (TestCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];// 需要加上!!![cell setNeedsLayout];// 在加载动画的时候,即未获得数据时,不要走加载控件数据的方法if (_collectionView.animatedStyle != TABCollectionViewAnimationStart) {[cell initWithData:dataArray[indexPath.row]];}return cell;
}
- 特别注意UIView和UICollectionView用的是同一枚举
再啰嗦一下:
- 本文只是简单的引导作用,你可以用本框架订制更精美的效果,具体例子github上代码都有哦~
- 遇到问题先去demo上看看有没有使用示例,实在不行联系我~
最后:
- 欢迎在下方讨论,同时,如果觉得对你有所帮助的话,能在github上star一下就更好了~
- 如有问题,可以联系我, wx:awh199833
- 问题交流群:304543771
- github地址:https://github.com/tigerAndBu...
ios 原生骨架动画库相关推荐
- iOS渐变视图动画库、腰杆、音频水滴水波手势、多种对话框、四级展开效果等源码
iOS精选源码 用户行为追踪–无侵入埋点 .终端日志的打印 支持storyboard的渐变视图&动画库 支持圆形.竖直.横向的摇杆 纯swift实现的类似excel表格效果 swift实现自定 ...
- android 骨架屏刷新动画,ios - 原生骨架屏,网络加载过渡动画的封装
效果图 闪光灯模式 骨架屏模式 经典动画模式 闪光灯动画.gif 只有骨架屏.gif 经典动画.gif 本项目思维导图 思维导图.JPG 说明 本文将介绍如何将demo集成到你的项目中 均为个人思考, ...
- Android IOS平台AE动画库
库 公司 支持平台 网址 Lottie Airbnb 爱彼迎 Android ios Web ReactNative Windows https://airbnb.io/lottie SVGA YY ...
- AE 动画直接变原生代码:Airbnb 发布开源动画库 Lottie
原文 Airbnb 发布的 Lottie 是一个面向 iOS.Android 和 React Native 的开源动画库. 简单来说,就是可以直接利用 AE 导出的 JSON 动画文件,将其解析为原生 ...
- 动画库 Lottie 的使用
本文主要介绍动画开源库 Lottie 在 Android 中的使用. 前言 在日常APP开发中,为了提升用户感官舒适度等原因,我们会在APP中加入适量动画. 而传统手写动画方式往往存在诸多问题: 动画 ...
- Lottie开源动画库
为什么80%的码农都做不了架构师?>>> 一款Lottie的动画库,效果挺好,查了一下发现这款动画库可以支持H5.它能够同时支持iOS.Android.ReactNative和 ...
- ae制h5文字动画_大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
- android 2048 动画,大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
- Lottie安卓开源动画库使用
碉堡的Lottie Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就 ...
最新文章
- java一个参数 多个值_Spring里有类似@RequestParam的办法去绑定一个多值参数吧
- [转]用DateTime.ToString(string format)输出不同格式
- CentOS中使用Dockerfile部署带websocket的SpringBoot的jar包
- 利用学习率衰减找到最优结果(基于Iris数据集)
- Scala学习思维导图
- 如何将SAP数据传输到其他系统(Transferring Data from SAP to Other Systems)
- d3 和echart_D3.js与echart.js的应用场景
- 利用python开发微信JS-JDK(基于python3.6)
- 18.go 日志监控系统
- OpenCV-特征提取与检测(02、Shi-Tomasi角点检测)
- linux欺骗技术,显卡欺骗器状态检测及安装注意事项
- 如何批量修改Word文档Mathtype公式字体
- RapidMiner介绍与实践(二)贝叶斯分类器
- 帧、采样率、Hz、比特率
- 2020晓庄学院专转本C语言考试试卷,南京晓庄学院五年一贯制专转本模拟考试c语言...
- 微信小程序开发:集成腾讯地图的步骤
- 毕业设计-基于SpringBoot幼儿园管理系统
- Camera--(7)手机双摄像头原理及产业解析
- 关于买房的后的人生感悟
- Dashboard的安装及其配置
热门文章
- Android 通过 XMPP 实现聊天功能,App Engine Assisted Group Chat (开源)
- 转PHP5+APACHE2.2配置
- pack unpakc
- UA MATH567 高维统计 专题0 为什么需要高维统计理论?——高维统计理论的常用假设
- UA MATH567 高维统计I 概率不等式4 亚高斯分布
- UA MATH523A 实分析3 积分理论例题 证明函数列L1收敛的一个题目
- 两个半小时,一份Python基础试卷,满分100,却有80%的人都不及格
- Django-分页扩展
- java高级之Io流
- ruby简单的基础 4