服务器之家

服务器之家 > 正文

iOS利用CALayer实现动画加载的效果

时间:2021-02-05 15:29     来源/作者:iOS开发网

首先来看看效果图

iOS利用CALayer实现动画加载的效果

实现过程如下

控制器调用就一句代码:

?
1
[self showloadinginview:self.view];

方便控制器如此调用,就要为控制器添加一个分类

.h文件

?
1
2
3
4
5
6
7
8
9
#import <uikit/uikit.h>
#import "gqcircleloadview.h"
@interface uiviewcontroller (gqcircleload)
//显示动画
- (void)showloadinginview:(uiview*)view;
//隐藏动画
- (void)hideload;
@property (nonatomic,strong) gqcircleloadview *loadingview;
@end

.m文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#import "uiviewcontroller+gqcircleload.h"
#import <objc/runtime.h>
@implementation uiviewcontroller (gqcircleload)
- (gqcircleloadview*)loadingview
{
 return objc_getassociatedobject(self, @"loadingview");
}
- (void)setloadingview:(gqcircleloadview*)loadingview
{
 objc_setassociatedobject(self, @"loadingview", loadingview, objc_association_retain_nonatomic);
}
- (void)showloadinginview:(uiview*)view{
 if (self.loadingview == nil) {
  self.loadingview = [[gqcircleloadview alloc]init];
 }
 if (view) {
  [view addsubview:self.loadingview];
  self.loadingview.frame = view.bounds;
 }else{
  uiwindow *appkeywindow = [uiapplication sharedapplication].keywindow;
  [appkeywindow addsubview:self.loadingview];
  self.loadingview.frame = appkeywindow.bounds;
 }
}
- (void)hideload{
 [self.loadingview removefromsuperview];
}
@end

接下来就是gqcircleloadview继承uiview,里面通过drawrect画出圆圈,并且动画的实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
#import "gqcircleloadview.h"
#define window_width [[uiscreen mainscreen] bounds].size.width
#define window_height [[uiscreen mainscreen] bounds].size.height
static nsinteger circlecount = 3;
static cgfloat cornerradius = 10;
static cgfloat magin = 15;
@interface gqcircleloadview()<caanimationdelegate>
@property (nonatomic, strong) nsmutablearray *layerarr;
@end
 
@implementation gqcircleloadview
- (instancetype)initwithframe:(cgrect)frame{
 if (self = [super initwithframe:frame]) {
  self.backgroundcolor = [uicolor clearcolor];
 }
 return self;
}
// 画圆
- (void)drawcircles{
 for (nsinteger i = 0; i < circlecount; ++i) {
  cgfloat x = (window_width - (cornerradius*2) * circlecount - magin * (circlecount-1)) / 2.0 + i * (cornerradius*2 + magin) + cornerradius;
  cgrect rect = cgrectmake(-cornerradius, -cornerradius , 2*cornerradius, 2*cornerradius);
  uibezierpath *beizpath=[uibezierpath bezierpathwithroundedrect:rect cornerradius:cornerradius];
  cashapelayer *layer=[cashapelayer layer];
  layer.path=beizpath.cgpath;
  layer.fillcolor=[uicolor graycolor].cgcolor;
  layer.position = cgpointmake(x, self.frame.size.height * 0.5);
  [self.layer addsublayer:layer];
 
  [self.layerarr addobject:layer];
 }
 
 [self drawanimation:self.layerarr[0]];
 
 // 旋转(可打开试试效果)
// cabasicanimation* rotationanimation = [cabasicanimation animationwithkeypath:@"transform.rotation.y"];
// rotationanimation.tovalue = [nsnumber numberwithfloat: - m_pi * 2.0 ];
// rotationanimation.duration = 1;
// rotationanimation.cumulative = yes;
// rotationanimation.repeatcount = maxfloat;
// [self.layer addanimation:rotationanimation forkey:@"rotationanimation"];
}
 
// 动画实现
- (void)drawanimation:(calayer*)layer {
 cabasicanimation *scaleup = [cabasicanimation animationwithkeypath:@"transform.scale"];
 scaleup.fromvalue = @1;
 scaleup.tovalue = @1.5;
 scaleup.duration = 0.25;
 scaleup.timingfunction = [camediatimingfunction functionwithname:kcamediatimingfunctioneaseout];
 
 cabasicanimation *scaledown = [cabasicanimation animationwithkeypath:@"transform.scale"];
 scaledown.begintime = scaleup.duration;
 scaledown.fromvalue = @1.5;
 scaledown.tovalue = @1;
 scaledown.duration = 0.25;
 scaledown.timingfunction = [camediatimingfunction functionwithname:kcamediatimingfunctioneaseout];
 
 caanimationgroup *group = [[caanimationgroup alloc] init];
 group.animations = @[scaleup, scaledown];
 group.repeatcount = 0;
 group.duration = scaleup.duration + scaledown.duration;
 group.delegate = self;
 [layer addanimation:group forkey:@"groupanimation"];
 
}
#pragma mark - caanimationdelegate
- (void)animationdidstart:(caanimation *)anim
{
 if ([anim iskindofclass:caanimationgroup.class]) {
  caanimationgroup *animation = (caanimationgroup *)anim;
 
  [self.layerarr enumerateobjectsusingblock:^(cashapelayer *obj, nsuinteger idx, bool * _nonnull stop) {
 
   caanimationgroup *a0 = (caanimationgroup *)[obj animationforkey:@"groupanimation"];
   if (a0 && a0 == animation) {
    cashapelayer *nextlayer = self.layerarr[(idx+1)>=self.layerarr.count?0:(idx+1)];
    [self performselector:@selector(drawanimation:) withobject:nextlayer afterdelay:0.25];
    *stop = yes;
   }
  }];
 }
}
- (void)drawrect:(cgrect)rect{
 [super drawrect:rect];
 [self drawcircles];
}
- (nsmutablearray *)layerarr{
 if (_layerarr == nil) {
  _layerarr = [[nsmutablearray alloc] init];
 }
 return _layerarr;
}
@end

demo就不上传了,总共四个文件代码已经全贴上了!

总结

以上就是这篇文章的全部内容了,有兴趣可以试试打开上面的旋转的动画代码,关闭旋转代码,进一步修改也可实现出qq邮箱的下拉刷新效果,希望这篇文章的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部