利用CAReplicatorLayer实现的加载动画
在上一篇中,笔者简要介绍了CAReplicatorLayer,在本篇中,将介绍具体的实用价值。
实用CAReplicatorLayer作为核心技术实现加载动画。
首先,创建一个UIView的子类
@interface JHHJView : UIView
然后该子类暴露出一些类方法:
/* 显示加载动画 并添加到父视图上 */
+ (void)showLoadingOnView:(UIView *)superView Type:(JHHJViewType)type;
/* 显示动画 并添加在主窗口上 */
+ (void)showLoadingOnTheKeyWindowWithType:(JHHJViewType)type;
/* 停止动画 */
+ (void)hideLoading;
/* 设置动画背景色(全屏背景色) */
+ (void)backgroudColor:(UIColor *)color;
/* 设置中心视图的动画背景颜色 默认透明色 */
+ (void)centerBGViewBackgroudColor:(UIColor *)color;
并且声明了一个枚举类型:该枚举类型代表着加载动画类型。
typedef NS_ENUM(NSInteger,JHHJViewType){
/**
* 线性动画
*/
JHHJViewTypeSingleLine = , /**
* 方形点动画
*/
JHHJViewTypeSquare = , /**
* 三角形运动动画
*/
JHHJViewTypeTriangleTranslate = , /**
* 原型视图裁剪动画
*/
JHHJViewTypeClip
};
在.m文件中,该类拥有的成员变量如下:
@interface JHHJView ()
//中心背景视图
@property (nonatomic,strong)JHHJCenterBGView *centerBGView;
//计时器
@property (nonatomic,strong)NSTimer * clipTimer;
//层数组
@property (nonatomic,strong)NSMutableArray * clipLayerArr;
//计时器计量数
@property (nonatomic,assign) long long currentTimerIndex;
//背景层
@property (nonatomic,strong) CAShapeLayer *bgLayer;
@end
然后,设置以单例的方式创建该类的对象:
/**
* 对象单例化
*
* @return 单例对象
*/
+ (JHHJView *)shareInstanceJHHJView{
static JHHJView * instance = nil;
if (!instance) {
instance = [[JHHJView alloc] initWithFrame:[UIScreen mainScreen].bounds];
instance.centerBGView = [[JHHJCenterBGView alloc] initWithFrame:CGRectMake(, , , )];
instance.centerBGView.center = CGPointMake(K_IOS_WIDTH / , K_IOS_HEIGHT/);
[instance addSubview:instance.centerBGView];
}
return instance;
}
最重要的一点,动画的实现如下:
/**
* 展示动画视图 并添加到依赖视图上
*
* @param superView 依赖的父视图
* @param type 动画样式
*/
+ (void)showLoadingOnView:(UIView *)superView Type:(JHHJViewType)type{
/* 在显示前 先从父视图移除当前动画视图 */
JHHJView *instance = [[self class] shareInstanceJHHJView];
[[self class] hideLoading];
/* 显示前 先将动画图层从中心视图上移除 */
for (CALayer *layer in instance.centerBGView.layer.sublayers) {
[layer removeFromSuperlayer];
}
/* 按照type初始化动画 */
switch (type) {
case JHHJViewTypeSingleLine:
{
CALayer *layer = [instance lineAnimation];
layer.position = CGPointMake(CGRectGetWidth(instance.centerBGView.frame)/ - , CGRectGetHeight(instance.centerBGView.frame)/);
[instance.centerBGView.layer addSublayer:layer];
}break; case JHHJViewTypeSquare:
{
CALayer *layer = [[self class] qurareAnimation];
layer.position = CGPointMake(CGRectGetWidth(instance.centerBGView.frame)/, CGRectGetHeight(instance.centerBGView.frame)/);
[instance.centerBGView.layer addSublayer:layer];
}break;
case JHHJViewTypeTriangleTranslate:
{
CALayer *layer = [[self class] triangleAnimation];
layer.position = CGPointMake(CGRectGetWidth(instance.centerBGView.frame)/ - , CGRectGetHeight(instance.centerBGView.frame)/ - );
[instance.centerBGView.layer addSublayer:layer];
}break;
case JHHJViewTypeClip:
{ CALayer *layer = [[self class] clipAnimation];
layer.position = CGPointMake(CGRectGetWidth(instance.centerBGView.frame)/ , CGRectGetHeight(instance.centerBGView.frame)/ - );
[instance.centerBGView.layer addSublayer:layer]; }break;
default:
break;
}
[superView addSubview:instance];
}
具体的流程即是以上,下面来具体实现其中一个动画,以三角形旋转动画为例:
/**
* 三角形运动动画
*
* @return 动画实例对象
*/
+ (CALayer *)triangleAnimation{
/* 基本间距确定及模板层的创建 */
CGFloat radius = /4.0;
CGFloat transX = - radius;
CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = CGRectMake(, , radius, radius);
shape.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(, , radius, radius)].CGPath;
shape.strokeColor = [UIColor redColor].CGColor;
shape.fillColor = [UIColor redColor].CGColor;
shape.lineWidth = ;
[shape addAnimation:[JHHJAnimation rotateAnimation] forKey:@"rotateAnimation"]; /* 创建克隆层 */
CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
replicatorLayer.frame = CGRectMake(, , radius, radius);
replicatorLayer.instanceDelay = 0.0;
replicatorLayer.instanceCount = ;
CATransform3D trans3D = CATransform3DIdentity;
trans3D = CATransform3DTranslate(trans3D, transX, , );
trans3D = CATransform3DRotate(trans3D, 120.0*M_PI/180.0, 0.0, 0.0, 1.0);
replicatorLayer.instanceTransform = trans3D;
[replicatorLayer addSublayer:shape];
return replicatorLayer;
}
JHHJAnimation这个类是为了分离代码,而创建的动画创建类,里面使用类方法创建各种核心动画,如:
/**
* 缩小动画
*
*/
+ (CABasicAnimation *)animationForScaleSmall{
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform"];
basic.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, , , )];
basic.toValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 0.2, 0.2, )];
basic.duration = 1.05;
basic.repeatCount = HUGE;
return basic;
}
好了,基本的流程就是这样了,来个效果图:
这里只讲了样式3动画的实现步骤,如果需要理解其他动画样式的实现,可以从github上下载代码,地址为:https://github.com/China131/JHLoadingForHJ,喜欢的话记得star,
利用CAReplicatorLayer实现的加载动画的更多相关文章
- WPF当属性值改变时利用PropertyChanged事件来加载动画
在我们的程序中,有时我们需要当绑定到UI界面上的属性值发生变化从而引起数据更新的时候能够加载一些动画,从而使数据更新的效果更佳绚丽,在我们的程序中尽量将动画作为一种资源放在xaml中,而不是在后台中通 ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
- CSS 实现加载动画之八-圆点旋转
这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...
- CSS 实现加载动画之一-菊花旋转
最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来 ...
- 你会用swift创建复杂的加载动画吗(1)
时至今日,iOS 应用商店已经拥有超过了140万 应用,让你自己的应用脱颖而出确实是个不小的挑战.不过,在你的应用掉入默默无闻的大黑洞之前,你拥有一个小小的机遇窗,它能帮你吸引用户的注意. AD: 时 ...
- CSS动画实例:Loading加载动画效果(三)
3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
- 【动画消消乐】HTML+CSS 自定义加载动画 061
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...
- 【动画消消乐】HTML+CSS 自定义加载动画 065
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
随机推荐
- hdu3087 LCA + 暴力
Network Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Su ...
- hdu2874 LCA在线算法
Connections between cities Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
- Android进程整理
一.概括 系统启动架构图: 上图在Android系统-开篇中有讲解,是从Android系统启动的角度来分析,本文是从进程/线程的视角来分析该问题. 1.1 父进程 在所有进程中,以父进程的姿态存在的进 ...
- shell中$0,$?,$!等的特殊用法
变量说明: $$Shell本身的PID(ProcessID)$!Shell最后运行的后台Process的PID$?最后运行的命令的结束代码(返回值)$-使用Set命令设定的Flag一览$*所有参数列表 ...
- 向shell脚本中传入参数
写一个 程序名为 test.sh 可带参数为 start 和 stop 执行 test.sh start执行 start 内容的代码 执行 test.sh stop 执行 stop 内 ...
- 这些年MAC下我常用的那些快捷键
Command + H:隐藏窗口 Command + M:最小化窗口 Command + N:新建 Command + O:打开 Command + S:保存 Command + shift+S:另存 ...
- BZOJ1483: [HNOI2009]梦幻布丁
传送门 名字起得很高端实际上很简单的算法hhh 启发式合并 简单讲就是一些合并一堆队列的题可以用启发式合并,或者说这是一个思想.每次把小的合并到大的部分,均摊复杂度$O(MlogN)$. //BZOJ ...
- python取mysql数据写入excel
环境:MySQLdb openpyxl模块 python去zabbix的mysql数据库中取交换机不同时间段的进出口流量,然后写入excel中,每天cron执行,每周四邮件发送.(代码中第一行必须加上 ...
- SAX与DOM
http://www.cnblogs.com/zhulin/archive/2012/05/03/2480962.html 在解析xml时(如浏览器解析html标签),主要存在两种方式:SAX模式和D ...
- Structure And Representation Of MIB Object Names - SNMP Tutorial
30.8 Structure And Representation Of MIB Object Names We said that ASN.1 specifies how to represent ...