一畔濒、demo中的加載動畫#
demo中主要技術點：
1奴曙、CAShapeLayer的應用
2荠呐、CAReplicatorLayer的使用以及布局
3篷店、一些常用的CABasicAnimation的動畫實現
我已經把相應的動畫效果封裝到工具類，下載可以直接使用花椭。
githud代碼地址：
LZBLoadingAnimation github下載鏈接
二忽匈、CAReplicatorLayer介紹#
CAReplicatorLayer 復制層，可以（復制子控件）矿辽，并且可以復制子控件的動畫效果丹允，通過屬性可以布局樣式郭厌。
使用優(yōu)點：可以完全復制子控件，不用在去繁瑣的創(chuàng)建子控件
使用確定：子控件完全一樣雕蔽，不能單獨設置其中一個子控件的屬性折柠。想想第一個boss直聘動畫，沒有圓都是不同的顏色批狐，怎么辦扇售？
部分屬性：
instanceCount 復制子控件的個數
instanceDelay 間隔時間
instanceTransform 布局
//顏色漸變
@property float instanceRedOffset;
@property float instanceGreenOffset;
@property float instanceBlueOffset;
@property float instanceAlphaOffset;
三、動畫詳解#
1嚣艇、boss直聘加載動畫
原理步驟：
1.1 創(chuàng)建單個圓
+ (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
{
//創(chuàng)建單個圓
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
{
//創(chuàng)建單個圓
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 是對程序猿最大的鼓勵贮匕！
