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

首先来看看效果图

实现过程如下

控制器调用就一句代码:

[self showloadinginview:self.view];

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

.h文件

#import <uikit/uikit.h>
#import "gqcircleloadview.h"
@interface uiviewcontroller (gqcircleload)
//显示动画
- (void)showloadinginview:(uiview*)view;
//隐藏动画
- (void)hideload;
@property (nonatomic,strong) gqcircleloadview *loadingview;
@end

.m文件

#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画出圆圈,并且动画的实现

#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邮箱的下拉刷新效果,希望这篇文章的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。