一、demo中的加载动画#
demo中主要技术点：
1、CAShapeLayer的应用
2、CAReplicatorLayer的使用以及布局
3、一些常用的CABasicAnimation的动画实现
我已经把相应的动画效果封装到工具类，下载可以直接使用。
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 是对程序猿最大的鼓励！
