首先來看看效果圖
實現過程如下
控制器調用就一句代碼:
|
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.heightstatic 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郵箱的下拉刷新效果,希望這篇文章的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
