? ?Copyright ? 2017年ZaneWangWang. All rights reserved.
? ? ? 如果你看到的不是原文請看原文iOS中Layer層CABasicAnimation和CAAnimationGroup應(yīng)用踏兜。這篇文章主要介紹CABasicAnimation和CAAnimationGroup的混合使用作出相應(yīng)效果,關(guān)于基礎(chǔ)知識請看CoreAnimation開發(fā)框架中Layer層動畫。
先展示兩種效果如下圖:
知識不在贅述,直接上代碼:
1.創(chuàng)建一個AnimationLayer類
.h文件如下
#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>
typedefNS_ENUM(NSInteger ,AnimationType){
LoadDataType =0,
SingleType
};
@interfaceAnimationLayer :CALayer
+(instancetype)layerWithType:(AnimationType)type;
@end
.m文件如下
#import"AnimationLayer.h"
@implementationAnimationLayer
+(instancetype)layerWithType:(AnimationType)type{
[superlayer];
AnimationLayer*contentLayer = [selflayer];
switch(type) {
caseLoadDataType:
[contentLayerloadDataAnimationWithContentLayer:contentLayer];
break;
caseSingleType:
[contentLayersingleAnimationWithContentLayer:contentLayer];
break;
default:
break;
}
returncontentLayer;
}
- (void)singleAnimationWithContentLayer:(AnimationLayer*)layer{
//self.view.layer.backgroundColor = [UIColor clearColor].CGColor;
CAShapeLayer*pulseLayer = [CAShapeLayerlayer];
pulseLayer.frame=CGRectMake(0,0,180,180);
//pulseLayer.
pulseLayer.path= [UIBezierPathbezierPathWithOvalInRect:pulseLayer.bounds].CGPath;
pulseLayer.fillColor= [UIColorgreenColor].CGColor;
pulseLayer.opacity=0.0;
CAReplicatorLayer*replicatorLayer = [CAReplicatorLayerlayer];
replicatorLayer.frame= layer.bounds;
replicatorLayer.instanceCount=8;
replicatorLayer.instanceDelay=0.5;
[replicatorLayeraddSublayer:pulseLayer];
[layeraddSublayer:replicatorLayer];
CABasicAnimation*opacityAnima = [CABasicAnimationanimationWithKeyPath:@"opacity"];
opacityAnima.fromValue=@(0.3);
opacityAnima.toValue=@(0.02);
CABasicAnimation*scaleAnima = [CABasicAnimationanimationWithKeyPath:@"transform"];
scaleAnima.fromValue= [NSValuevalueWithCATransform3D:CATransform3DScale(CATransform3DIdentity,0.0,0.0,0.0)];
scaleAnima.toValue= [NSValuevalueWithCATransform3D:CATransform3DScale(CATransform3DIdentity,1.0,1.0,0.0)];
CAAnimationGroup*groupAnima = [CAAnimationGroupanimation];
groupAnima.animations=@[opacityAnima, scaleAnima];
groupAnima.duration=3.0;
groupAnima.autoreverses=NO;
groupAnima.repeatCount=HUGE;
[pulseLayeraddAnimation:groupAnimaforKey:@"groupAnimation"];
}
- (void)loadDataAnimationWithContentLayer:(AnimationLayer*)layer{
CGFloatmargin =5.0f;//間隔
CGFloatcols =3.0f;//個數(shù)
CGFloatwidth = [UIScreenmainScreen].bounds.size.width/5.0f;//總體寬度
CGFloatdotW = (width - margin * (cols -1.0f)) / cols;//單個寬度
CAShapeLayer*dotLayer = [CAShapeLayerlayer];//一個layer
dotLayer.frame=CGRectMake(0,0, dotW, dotW);
dotLayer.path= [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0, dotW, dotW)].CGPath;
dotLayer.fillColor= [UIColorredColor].CGColor;
CAReplicatorLayer*replicatorLayerX = [CAReplicatorLayerlayer];
replicatorLayerX.frame=CGRectMake(0,0, width, width);
replicatorLayerX.instanceDelay=0.3;
replicatorLayerX.instanceCount= cols;
[replicatorLayerXaddSublayer:dotLayer];
CATransform3Dtransform =CATransform3DTranslate(CATransform3DIdentity, dotW + margin,0,0);
replicatorLayerX.instanceTransform= transform;
transform =CATransform3DScale(transform,1, -1,0);
CAReplicatorLayer*replicatorLayerY = [CAReplicatorLayerlayer];
replicatorLayerY.frame=CGRectMake(0,0, width, width);
replicatorLayerY.instanceDelay=0.3;
replicatorLayerY.instanceCount=3;
[replicatorLayerYaddSublayer:replicatorLayerX];
CATransform3DtransforY =CATransform3DTranslate(CATransform3DIdentity,0,0, dotW + margin);
replicatorLayerY.instanceTransform= transforY;
//添加動畫
CABasicAnimation*opacityAnima = [CABasicAnimationanimationWithKeyPath:@"opacity"];
opacityAnima.fromValue=@(0.3);
opacityAnima.toValue=@(0.3);
CABasicAnimation*scaleAnima = [CABasicAnimationanimationWithKeyPath:@"transform"];
scaleAnima.fromValue= [NSValuevalueWithCATransform3D:CATransform3DScale(CATransform3DIdentity,1.0,1.0,0.0)];
scaleAnima.toValue= [NSValuevalueWithCATransform3D:CATransform3DScale(CATransform3DIdentity,0.2,0.2,0.0)];
CAAnimationGroup*groupAnima = [CAAnimationGroupanimation];
groupAnima.animations=@[opacityAnima, scaleAnima];
groupAnima.duration=1.0;
groupAnima.autoreverses=YES;
groupAnima.repeatCount=HUGE;
[dotLayeraddAnimation:groupAnimaforKey:@"groupAnimation"];
[layeraddSublayer:replicatorLayerY];
}
@end
2.在視圖控制器中的使用如下圖:
