最近在研究动画，发现通过CAReplicatorLayer 可以生成好多炫酷的动画。
首先我们来看下里面Api主要用到的一些api
@property NSInteger instanceCount; //图层复制的次数
@property BOOL preservesDepth;//如果设置为 YES,图层将保持和 CATransformLayer 相同的性质和限制
@property CFTimeInterval instanceDelay;//每个复制图层延迟出现
@property CATransform3D instanceTransform;//每个图层怎么移动
@property(nullable) CGColorRef instanceColor;//复制出图层的颜色
看完上面，其实就可以开始搞了。
第一个波纹动画
QQ20180701-111410-HD.gif
CAShapeLayer *shapelayer = [CAShapeLayer layer];
shapelayer.frame = CGRectMake(0, 0, 150, 150);
shapelayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 150, 150)].CGPath;
shapelayer.fillColor = [UIColor blueColor].CGColor;
shapelayer.opacity = 0.0;
// 动画组
//alpha
CABasicAnimation *alpha = [CABasicAnimation animationWithKeyPath:@"opacity"];
alpha.fromValue = @(1.0);
alpha.toValue = @(0.0);
//scale
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform"];
CATransform3D identidy = CATransform3DIdentity;
scale.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(identidy, 0.0, 0.0, 0.0)];
scale.toValue = [NSValue valueWithCATransform3D:CATransform3DScale(identidy, 1.0, 1.0, 0.0)];
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[alpha,scale];
group.repeatCount = HUGE;
group.autoreverses = NO;
group.duration = 4.0;
[shapelayer addAnimation:group forKey:@"animationGroup"];
CAReplicatorLayer *Rplayer = [CAReplicatorLayer layer]; //复制功能
Rplayer.instanceCount = 9.0;//数量
Rplayer.instanceDelay = 0.6;//延迟时间
Rplayer.frame = CGRectMake(0, 0, 150, 150);
[Rplayer addSublayer:shapelayer];
// [self.view.layer addSublayer:layer];
UIView * subView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 300, 300)];
subView.center = CGPointMake(SCREEN_WIDTH/2, SCREEN_HEIGHT/2);
// subView.backgroundColor = [UIColor redColor];
[subView.layer addSublayer:Rplayer];
[self.view addSubview:subView];
第二个 球的波纹动画
QQ20180701-111544-HD.gif
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(0, 0, 50, 50);
layer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 50, 50)].CGPath;
layer.fillColor = [UIColor blueColor].CGColor;
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform"];
scale.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0)];
scale.toValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 0.2, 0.2, 0)];
scale.autoreverses = YES;
scale.duration = 0.5;
scale.repeatCount = HUGE;
[layer addAnimation:scale forKey:@"scaleAnimation"];
CAReplicatorLayer *Rlayer = [CAReplicatorLayer layer];
Rlayer.instanceDelay = 0.2;
Rlayer.instanceCount = 4;
Rlayer.instanceTransform = CATransform3DMakeTranslation(50, 0, 0); //每复制一个块向右移动
Rlayer.frame = CGRectMake(100, 100, 50, 50);
[Rlayer addSublayer:layer];
UIView * subView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 300, 300)];
subView.center = CGPointMake(100, SCREEN_HEIGHT/2);
// subView.backgroundColor = [UIColor redColor];
[subView.layer addSublayer:Rlayer];
[self.view addSubview:subView];
第三个 翻转
QQ20180701-111711-HD.gif
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(100,100, 50, 50);
layer.path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 50, 50)].CGPath;
layer.fillColor = [UIColor blueColor].CGColor;
CABasicAnimation *roteAnimation = [CABasicAnimation animationWithKeyPath:@"transform"]; //围着x轴转
roteAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, 0, 1, 0, 0)];
roteAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, M_PI, 1, 0, 0)];
roteAnimation.duration = 1.0;
roteAnimation.repeatCount = HUGE;
// roteAnimation.autoreverses = YES;
[layer addAnimation:roteAnimation forKey:@"rote"];
CAReplicatorLayer *Rllayer = [CAReplicatorLayer layer];
Rllayer.instanceDelay = 1;
Rllayer.instanceCount = 8;
Rllayer.instanceTransform = CATransform3DTranslate(CATransform3DIdentity, 0, 60, 0);
[Rllayer addSublayer:layer];
[self.view.layer addSublayer:Rllayer];
第四个
QQ20180701-111825-HD.gif
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 25, 25)].CGPath;
layer.fillColor = [UIColor blueColor].CGColor;
layer.frame = CGRectMake(0, 0, 25, 25);
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform"];
CATransform3D identity = CATransform3DIdentity;
CATransform3D fromValue = CATransform3DRotate(identity, 0.0, 0.0, 0.0, 0.0);
scale.fromValue = [NSValue valueWithCATransform3D:fromValue];
CATransform3D toValue = CATransform3DTranslate(identity, 75, 0.0, 0.0);
toValue = CATransform3DRotate(toValue,M_PI, 0.0, 0.0, 1.0);
scale.toValue = [NSValue valueWithCATransform3D:toValue];
scale.autoreverses = NO;
scale.repeatCount = HUGE;
scale.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
scale.duration = 2;
[layer addAnimation:scale forKey:@"scaleAnimation"];
CAReplicatorLayer *Rlayer = [CAReplicatorLayer layer];
Rlayer.instanceCount = 6;
Rlayer.instanceDelay = 0;
Rlayer.frame = CGRectMake(0, 0, 25, 25);
CATransform3D trans3d = CATransform3DIdentity;
trans3d = CATransform3DTranslate(trans3d, 75, 0, 0);
trans3d = CATransform3DRotate(trans3d, 60*M_PI/180, 0, 0, 1.0);
Rlayer.instanceTransform = trans3d;
[Rlayer addSublayer:layer];
UIView * subView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 300, 300)];
subView.center = CGPointMake(200,250);
// subView.backgroundColor = [UIColor redColor];
[subView.layer addSublayer:Rlayer];
[self.view addSubview:subView];
第五个
QQ20180701-112104-HD.gif
CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
replicatorLayer.frame = CGRectMake(100, 100, 8, 8);
//闪动点
CALayer *dot = [CALayer layer];
dot.bounds = CGRectMake(0, 0, 8, 8);
dot.cornerRadius = 4;
dot.masksToBounds = YES;
dot.position = CGPointMake(60,10);
dot.backgroundColor = [UIColor blueColor].CGColor;
[replicatorLayer addSublayer:dot];
NSInteger count = 12;
replicatorLayer.instanceCount = count;
CGFloat angel = 2* M_PI/count;
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angel, 0, 0, 1);
//添加动画
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
CFTimeInterval duration = 1.5;
animation.duration = duration;
animation.fromValue = @1.0;
animation.toValue = @0.1;
animation.repeatCount = MAXFLOAT;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[dot addAnimation:animation forKey:nil];
replicatorLayer.instanceDelay = duration/ count;
dot.transform = CATransform3DMakeScale(0.01, 0.01, 0.01);
UIView * subView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 300, 300)];
subView.center = CGPointMake(SCREEN_WIDTH/2, SCREEN_HEIGHT/2);
// subView.backgroundColor = [UIColor redColor];
[subView.layer addSublayer:replicatorLayer];
[self.view addSubview:subView];
下面是demo地址。
https://github.com/Butteryflyyer/AnimateGroup 给颗星哦
ios自习室欢迎进入，一起学习一起进步。
IMG_7291.JPG
网友评论