一、demo中的加载动画#

demo中主要技术点：
1、CAShapeLayer的应用
2、CAReplicatorLayer的使用以及布局
3、一些常用的CABasicAnimation的动画实现

loading.gif

我已经把相应的动画效果封装到工具类，下载可以直接使用。
githud代码地址：
LZBLoadingAnimation github下载链接

二、CAReplicatorLayer介绍#

CAReplicatorLayer 复制层，可以（复制子控件），并且可以复制子控件的动画效果，通过属性可以布局样式。

使用优点：可以完全复制子控件，不用在去繁琐的创建子控件
使用确定：子控件完全一样，不能单独设置其中一个子控件的属性。想想第一个boss直聘动画，没有圆都是不同的颜色，怎么办？

部分属性：

instanceCount 复制子控件的个数
instanceDelay 间隔时间
instanceTransform 布局
//颜色渐变
@property float instanceRedOffset;
@property float instanceGreenOffset;
@property float instanceBlueOffset;
@property float instanceAlphaOffset;

三、动画详解#

1、boss直聘加载动画
原理步骤：
1.1 创建单个圆

+ (CAShapeLayer *)creatShapeLayerWithRadius:(CGFloat)radius

{
CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = CGRectMake(0, 0, radius, radius);
shape.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, radius, radius)].CGPath;
shape.strokeColor = [UIColor blackColor].CGColor;
shape.fillColor = [UIColor blackColor].CGColor;
return shape;
}

1.2 增加单个圆的动画路径

 + (CABasicAnimation *)addReplicatorLayerRotationAnimaitonWithTranslateX:(CGFloat)translateX

{
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform"];
CATransform3D fromValue = CATransform3DRotate(CATransform3DIdentity, 0, 0, 0, 0);
basic.fromValue = [NSValue valueWithCATransform3D:fromValue];
CATransform3D toValue = CATransform3DTranslate(CATransform3DIdentity, translateX, 0, 0);
 toValue = CATransform3DRotate(toValue, 90.0*M_PI/180.0, 0, 0, 1.0);
basic.toValue = [NSValue valueWithCATransform3D:toValue];
basic.autoreverses = NO;
basic.repeatCount = HUGE;
basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
basic.duration = 1.5;
return basic;

}

1.3 复制多个圆，并且布局，注意布局比较重要

复制多个圆

+ (CAReplicatorLayer *)creatReplicatorLayerWithCount:(NSInteger)count tranform:(CATransform3D) transform  copyLayer:(CALayer*)copyLayer
  {
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.instanceCount = count;
    replicatorLayer.instanceTransform = transform;
    replicatorLayer.frame = copyLayer.frame;
    [replicatorLayer addSublayer:copyLayer];
    return replicatorLayer;
  }

最后暴露的方法
+ (CALayer *)loadingReplicatorLayer_SquareWithWidth:(CGFloat)width
{
//创建单个圆
CGFloat sigleSquareDiameter = 20;
CAShapeLayer shape = [self creatShapeLayerWithRadius:sigleSquareDiameter];
[shape addAnimation:[self addReplicatorLayerRotationAnimaitonWithTranslateX:width - sigleSquareDiameter] forKey:@"rotation"];
//复制多个同样的圆
CATransform3D transform3D = CATransform3DIdentity;
transform3D = CATransform3DRotate(transform3D, 90.0M_PI/180.0, 0, 0, 1.0);
CAReplicatorLayer *replicatorLayer = [self creatReplicatorLayerWithCount:4 tranform:transform3D copyLayer:shape];
return replicatorLayer;
}

2、常用的圆加载，原理和第一个差不多，看代码就可以看懂（只是动画效果不一样而已）

 + (CALayer *)loadingReplicatorLayer_RoundDot

 {
//创建单个圆
CGFloat sigleSquareDiameter = 15;
CAShapeLayer *shape = [self creatShapeLayerWithRadius:sigleSquareDiameter];
[shape addAnimation:[self addReplicatorLayerScaleAnition] forKey:@"scale"];
shape.transform = CATransform3DMakeScale(0.01, 0.01, 0.01);
//复制多个同样的圆
NSInteger instanceCount = 10;
CATransform3D transform3D = CATransform3DIdentity;
transform3D = CATransform3DRotate(transform3D, 2*M_PI/instanceCount, 0, 0, 1.0);
 CAReplicatorLayer *replicatorLayer = [self creatReplicatorLayerWithCount:instanceCount tranform:transform3D copyLayer:shape];
replicatorLayer.instanceDelay = 1.0/instanceCount;
return replicatorLayer;
}

githud代码地址：
LZBLoadingAnimation github下载链接

最后赠言###

如果觉得文章对您有帮助，不要忘记star哦!😝，star 是对程序猿最大的鼓励！